jQueryメニューツリー、上下にスライドします

Question

JQuery Dropdowメニューを作成しようとしていますが、これまでのところ正常に動作しています。フォルダー/ツリーを開くことができず、再び閉じないことを除いて。 jqueryでEQまたは兄弟を使用する必要があると思いますか？しかし、私はそれらをまとめる方法がわかりません - 誰もが見せることができますか？ :)

<ul class="nav">
    <li><a href="#">Test link</a></li>
    <ul class="nav">
        <li>Test under</li>
    </ul>
</ul>

jQuery(document).ready(function(){
    jQuery('.nav ul').css('display', 'none');

    jQuery('.nav li').click(function(){
        jQuery(this).find('ul:first').slideDown(); 
    })

})

//サイモン

Answer 1

マークアップには構文エラーがあります - <ul> 要素はです <li>. 。リストをネストしたい場合は、 <li> 自体：

<ul class="nav">
    <li>
        <a href="#">Test link</a>
        <ul class="nav">
            <li>Test under</li>
        </ul>
    </li>
</ul>

切り替えるために、兄弟を検索するように指示するだけです <ul> 要素を適用します .slideToggle() リンクがクリックされたときの方法：

$(function() {
    // Hide submenus
    $(".nav ul").hide();

    // Toggle nested <ul> (siblings of the link)
    $(".nav > li > a").click(function(e) {
        $(this).siblings("ul").slideToggle();
        e.preventDefault();
    });
});

これがデモフィドルです： http://jsfiddle.net/teddyrided/2y9fz/ （効果を示すためのリスト項目を追加しました）

Answer 2

使用する slideToggle(); それ以外の slideDown();, 、これにより、現在の方向に応じてスライドタウンまたはスライドアップを実行するようになります。

Answer 3

これは役立つはずです

各部分にラベルが付いているため、理解しやすいです。これは、単に使用するよりもはるかに気づき、考えている slideToggle. 。代わりに、それは明確に上下にスライドする必要がある状況を作成し、別のブランチが選択されたときに以前のブランチを元に戻します。

$('.nav ul').each(function () {
    $(this).on('click', function(e) {
        e.stopPropagation();//ignore ul clicks
    }).parent().on('click', function () {//target only parents of a ul
        if($(this).hasClass('on')) {//if selected
            $(this).addClass('on').children('ul').slideUp();//slideup
        } else {//if not selected
            if($(this).parent('.nav')) {//if start of branch
                $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches
            }
            $(this).addClass('on').children('ul').slideDown();//slideDown
        }
    });
});

再帰的であり、ターゲットのみです li それはaを持っています ul 子。別のブランチを選択すると、以前に開かれたブランチも戻ります。削除しました anchor アクションがオンになるはずだったため、タグ click, 、そして、この例のリンクはどこにも行きませんでした。どこにも行かない場合、なぜリンクが必要なのですか？

また、修正します html フォーマット、 uls内側 liS、彼らが兄弟である代わりに。 すなわち <li><ul><li></li></ul></li> それ以外の <li></li><ul><li></li></ul>.

フィドルを作った： http://jsfiddle.net/filever10/gml4x/