1

私は既存のテンプレートから作業しており、クラス ulDisplay をリスト項目に追加し、ホバー時にメニュー全体を開くメニューを取得しました。アクションをただ開くのではなく、アニメーション化したいと思いますか? メニューの深さは 4 レベルであるため、複数レベルの深さの子を見つける行が重要です。

ここにスクリプトがあります：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                $(this).addClass("ulDisplay");
                $(this).find('ul,li').removeClass("ulHide");
                $(this).find('ul,li').addClass("ulDisplay");

            },

        function() { 
            $('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

申し訳ありませんが、これを以前に追加する必要がありました:

私がこれまでに試したことは機能しません:

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 
                    $(this).slideToggle('normal');
                    $(this).find('ul,li').removeClass("ulHide");
                    $(this).find('ul,li').addClass("ulDisplay");
                },

            function() {  
                $('ul#nav-primary').slideToggle('normal');
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

また、私は試しました：

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 

                    //$(this).addClass("ulDisplay");
                    $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                    $('ul#nav-primary li').find('ul,li').addClass("ulDisplay").stop(true, true).slideToggle(1000);

                },

            function() { 
                //$('ul#nav-primary').removeClass("ulDisplay"); 
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay").stop(true, true).slideToggle(1000);
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

そして最後に：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                //$(this).addClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                $('ul#nav-primary li').find('ul,li').addClass("ulDisplay", 1000);

            },

        function() { 
            //$('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay", 1000);
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

HTMLは次のとおりです。

<div id="nav">
    <h3><a href="/TemplatePackage/subtopic/B/index.html">Topic Homepage</a></h3>
    <ul id="nav-primary">
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a>
                    <ul>
                        <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4 - Item 1</a></li>
                                <li><a href="#">Level 4 - Item 2</a></li>
                                <li><a href="#">Level 4 - Item 3</a></li>
                                <li><a href="#">Level 4 - Item 4</a></li>
                                <!--<li><a href="/TemplatePackage/subtopic/B/basic_info/screening/level4.html#5">Level 4 - Item 5</a></li>-->
                            </ul>
                        </li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a><ul>
                    <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>
<div class="bottom"></div>
4

3 に答える 3

0

OKそれで、私はあなたの洞察と助けのためにあなたたちの両方に感謝したいと思います。それは本当に答えを見つけるのに役立ちました。動作するようになったコードは次のとおりです。

$(document).ready(function() {  

     $('ul#nav-primary').find('li').hover(function() {   
          $(this).children('ul').slideDown('normal');
          $(this).children('ul').removeClass('ulHide');
          $(this).children('ul').addClass('ulDisplay');
          $(this).children('ul').children('li').removeClass('ulHide');
          $(this).children('ul').children('li').addClass('ulDisplay');
                });


});

EH_warchとBlazemongerに感謝します

私が見つけた問題は実際にはCSSにあります。次のビデオを参照してください：http： //jqueryfordesigners.com/video.php？f = animation- jump2.flv これは、アニメーションにジャンプがある理由を人々が理解するのに役立ちます。

于 2012-06-22T15:01:49.590 に答える
0

jQuery UI (コア) を使用すると、クラスを追加するときに一部のプロパティを遷移できます。

$(this).find('ul,li').addClass("ulDisplay",1000); // milliseconds

ただし、ネストされた UL ブロックを表示および非表示にするだけの場合は、クラスを追加および削除する代わりに.slideToggle()(または個別に.slideDown()and を) 使用してみてください。.slideUp()

于 2012-06-20T18:23:57.443 に答える
0

JQuery アニメーションを使用して、必要なことを行います。関数を使用してみてください.toggle()：

 $(document).ready(function() {


    $('#primaryMenu').hover(function() { 

            $(this).toggle('fast');
            //$(this).find('ul,li').removeClass("ulHide");
            //$(this).find('ul,li').addClass("ulDisplay");

        },

    function() { 
        $('#primaryMenu').toggle('fast'); 
        //$('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
        //$('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
        })


});

アップデート

変更不可能なテンプレートを使用することは、ほとんどの場合良いことですが、きつい瞬間がいくつかあります。しかし、すべてが失われるわけではありません！javascript を使用してコードを変更できます。この投稿Pure javascript method to wrap content in a div in the Accepted answer を見つけました。このコードを見つけることができます:

 org_html = document.getElementById("slidesContainer").innerHTML;
 new_html = "<div id='slidesInner'>" + org_html + "</div>";
 document.getElementById("slidesContainer").innerHTML = new_html;

私は個人的にそれがかなり素晴らしいと感じました！とても役に立つと思うので、どこかに書き留めておきます。お役に立てば幸いです。

于 2012-06-20T18:28:23.120 に答える