Question

我正在尝试创建一个简单的jquery菜单但遇到问题。这是我的剧本：

<script>
$(function(){
$('#tm-u, #tm-e, #tm-n').click(function(){
 $( '#topmenu' ).css('display', 'block');
});
$('#topmenu').mouseleave(function(){
 $(this).css('display', 'none');
});
});
</script>

我的html结构是这样的：

<div id="login">
<a href="#tm-u">1</a>
<a href="#tm-e">1</a>
<a href="#tm-n">1</a>
</div

<div id="topmenu">
stuff
</div>

问题是topmenu出现在登录元素之下（使用z-index），因为我希望菜单显示在它下面，并保持登录按钮的功能以更改'topmenu'中的内容。

然而，使用mouseleave，只要光标进入登录元素，topmenu就会关闭，我希望它保持打开状态。

换句话说，即使你将鼠标悬停在位于其上方的登录元素上，我也希望topmenu元素保持可见。

我该怎么做？我尝试使用此代码，但它不起作用：/

$('#login').mouseenter(function(){
if ($('#topmenu').is(':visible')) {
alert('h');
$( '#topmenu' ).css('display', 'block');
};
});

Answer 1

一个好的解决方案是更改标记，并包装两个元素（#login和#topmenu）。然后将mouseleave处理程序绑定到其父级。

<强> HTML：

<div class="loginWrapper">
  <div id="login">
    <a href="#tm-u">1</a>
    <a href="#tm-e">1</a>
    <a href="#tm-n">1</a>
  </div>

  <div id="topmenu">
    stuff
  </div>
</div>

<强> JS ：

$('.loginWrapper').mouseleave(function(){
  $('#topmenu').css('display', 'none');
});

这样，你的鼠标将不得不离开包装器及其所有的孩子，以便开火。

Answer 2

这看起来像是一个CSS问题。

试试这个......

#topmenu:hover,
#login:hover + #topmenu {
  display: block;
}

Jquery mouseleave元素不需要的行为

2 个答案: