-2

我无法让 jquery 菜单正常工作

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

网站链接：这里

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 个小时。

4

2 回答 2

0

以下应该解决您的问题。

$("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);
});
于 2012-07-04T21:18:09.207 回答
0

您可以将 li 作为触发器而不是 a。这样，当您悬停子菜单时，您不应该得到 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); 
});
于 2012-07-04T21:18:43.190 回答