Question

我正在研究这个项目，导航菜单在悬停时自动打开，但是当我移动鼠标光标时它不会自动关闭。

这是我的代码，纠正错误的地方。

jQuery(document).on('hover', '.mobile-sub-menu-controller', function () {
       jQuery(this).siblings('.sub-menu').slideFadeToggle('return-position', 400);

        if (jQuery(this).find('i').hasClass('icon-angle-down')) {
            jQuery(this).find('i').removeClass('icon-angle-down');
            jQuery(this).find('i').addClass('icon-angle-up');
        } else {
            jQuery(this).find('i').removeClass('icon-angle-up');
            jQuery(this).find('i').addClass('icon-angle-down');
        }
    });

先谢谢

Answer 1

以下是mouseover和mouseleave

的示例

＆＃13;

$(document).on('mouseover', '.mobile-sub-menu-controller', function () {
       $(this).find('.sub-menu').stop().slideDown('fast');
});
$(document).on('mouseleave', '.mobile-sub-menu-controller', function () {
       $(this).find('.sub-menu').slideUp('fast');
});

＆＃13;

.mobile-sub-menu-controller{
  padding:10px;
  border:1px solid red;
  cursor:pointer;
}
.sub-menu{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mobile-sub-menu-controller'>
  open menu
  <ul class='sub-menu'>
    <li>menu item1
    <li>menu item2
    <li>menu item3
  </ul>
</div>

＆＃13;

Answer 2

尝试使用void foo() { int n = 10; boost::shared_ptr< int > pn(&n, boost::null_deleter()); assert(*pn == 10); // succeeds assert(pn.get() == &n); // succeeds bar(pn); }代替悬停，shared_ptr离开此区块时

Answer 3

使用别名语法：

jQuery(document).on('hover', '.mobile-sub-menu-controller', function () {
     // enter code here
    },function(){
     // exit/mouse leave code here
});

或直接事件：

jQuery(document).on('mouseenter', '.mobile-sub-menu-controller', function ()       {
     // enter code here
    });
jQuery(document).on('mouseleave', '.mobile-sub-menu-controller',,function(){
     // exit/mouse leave code here
});

关闭mouseLeave菜单

3 个答案: