0

これは、「リンク 3」にマウスを合わせると機能し、サブ サブ メニュー (ex_subnav) が開きますが、「リンク 3」をサブ メニューの他のオプションにマウス アウトすると、ex_subnav メニューも閉じる必要があります。現在のコードでは動作しますが、マウスを「リンク 3」から ex_subnav メニューに移動すると、再ロードされます。$(".ex_dropdown").mouseleave(function(){

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.topnav li a").mouseenter(function() {
            $(this).parent().find("ul.subnav").slideDown('fast').show();
        });  


        $(".dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.subnav").slideUp('fast');
        });

        $(".ex_level").mouseenter(function() {
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideDown('slow').show();
        });

        $(".ex_dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideUp('slow');
        });
    });

HTML:

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li class="dropdown">  
        <a href="#">About Us</a>  
        <ul class="subnav dropdown">  
            <li><a href="#">Sub Nav Link 1</a></li>  
            <li><a href="#">Sub Nav Link 2</a></li>
            <li><a class="ex_level ex_dropdown" href="#">Link 3</a>
                <ul class="ex_subnav ex_dropdown">
                    <li><a href="#">One</a></li>  
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>  
            </li>    
        </ul>
    </li>  
</ul>
</script>
4

1 に答える 1

0

リロード中なので

$(".ex_dropdown").mouseleave()<-これは機能しています

<a class="ex_level ex_dropdown" href="#">

つまり、「a」タグを付けたままにすると、mouseleave()機能が機能します。

サブメニュー レイアウトに mouseleave() 関数を設定する場合は、この行を変更するだけです。

<li><a class="ex_level ex_dropdown" href="#">Link 3</a>

あなたのhtmlでこのように、

<li class="ex_level ex_dropdown"><a href="#">Link 3</a>

それはあなたの問題を解決します。

スタイルなしのデモ

于 2012-05-02T23:44:47.443 に答える