Question

我无法让jquery菜单按照它应该的方式工作

当我悬停类时.trigger向下滑动，但当我用鼠标向下滑动时，它会一直向上和向下滑动。

链接到网站：HERE

Jquery的

<script type="text/javascript">
    $(document).ready(function () { 

        $('.sub_menu').hide();

        $('.trigger,.sub_menu').mouseenter(function() {
        //show its submenu
            $('.sub_menu').slideDown(300); 
        }); 

        $('.sub_menu,.trigger').mouseleave(function() {
        //show its submenu
            $('.sub_menu').slideUp(300); 
        }); 


    });
</script>

HTML

<div id="header">
    <div class="container">
        <a href="index.php"><h1 id="logo">Dick van Leeuwen Financieel Consult</h1></a>

        <div id="nav">
            <ul class="main_menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#" class="trigger">Hypotheken</a>
                    <ul class="sub_menu">
                        <li><a href="#">Hypotheekvormen</a></li>
                        <li><a href="#">Hyporheek rente</a></li>
                        <li><a href="#">Nationale hypotheek garantie</a></li>   
                    </ul>
                    <div class="clear"></div>                       
                </li>
                <li><a href="#">Verzekeringen</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- nav -->
    </div><!-- container -->
</div><!-- header -->

请帮助我卡住约5个小时。

Answer 1

以下内容应该排除您的问题。

$("a.trigger").parent().hover(function(e) {
    //when over the li (could be the a or sub_menu)
    $(this).find(".sub_menu").slideDown(300);
},function(e) {
    //when leaving the li
    $(this).find(".sub_menu").slideUp(300);
});

Answer 2

你可以让你的触发器而不是a。这样你就不会在悬停sub_menu时获得mouseleave事件：

 <li><a href="#">Home</a></li>
      <li class="trigger">
           <a href="#">Hypotheken</a>
           <ul class="sub_menu">
                <li><a href="#">Hypotheekvormen</a></li>
                <li><a href="#">Hyporheek rente</a></li>
                <li><a href="#">Nationale hypotheek garantie</a></li>   
           </ul>
           <div class="clear"></div>                       
        </li>
        <li><a href="#">Verzekeringen</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Contact</a></li>

然后将你的js更改为：

$('.trigger').mouseenter(function() {
    $('.sub_menu').slideDown(300); 
}).mouseleave(function() {
    $('.sub_menu').slideUp(300); 
});

无法获得jquery悬停菜单工作

2 个答案: