-2

jqueryメニューを正常に動作させることができません

クラスをホバーすると.triggerが下にスライドしますが、マウスで下に移動すると常に上下にスライドします。

ウェブサイトへのリンク:こちら

Jクエリ

<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

a の代わりに li をトリガーにすることもできます。そうすれば、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); 
});
于 2012-07-04T21:18:43.190 に答える