2

この質問のために、ネストされたul「ツリー」がありますが、これは最上位に数レベルと数個の子のみですが、最上位のul（id="group"ここで対象）からいくつかある可能性があると想定できる場合ネストされた要素ですが、常にこの構造に従います。現時点では、折りたたみ時に子の ul 要素を折りたたむトップ要素のみがあります。私は、すべての ul 要素でこの性質を実現したいと考えています。さらに、クリックした別の「同じレベル」で開いている要素も折りたたんで、別の ul だけが開いているようにしたいと考えています。達成しようとしている機能について説明できたことを願っています。私は使うべきだと感じていますが、それを使っslideToggle()たすべての試みはうまくいきませんでした.delegate() しかし、私は伝播（「イベントバブリング」）を理解しており、それがそのようなタスクに進む方法だと感じる理由の一部です. もう 1 つは、新しい要素を ul に追加する必要があるかもしれないということです。だからここに私が現在持っているものがあります：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul#group').delegate('a', 'click', function(event) {
            if($(event.target).next().is(':visible')) {
                if($(event.target).next()) {
                    $(event.target).next().find('ul').slideUp(250, function() {
                        $(event.target).next().slideUp(250);
                    });
                }
            } else {
                $(event.target).next().slideDown(250);
            }
        });
    });
</script>
<ul id="group">
    <li>
        <a href="#" onclick="return false;">Foo Bar 1</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Foo 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Foo 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" onclick="return false;">Bar Foo 2</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Bar 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Bar 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

そして、これがテストケースへのjsfiddle リンクです。これを達成できる最善の方法であれば、すべての意見を歓迎します。

4

3 に答える 3

1

より簡単なもの：

$('ul#group').delegate('a', 'click', function(event) {
  $(this).parent().children('ul').slideToggle(250);  
});
// At beginning hide elements preferably with css
$('ul#group').find('ul').hide();​​​​​​​

同じレベルで要素を折りたたむことなく。

ここにあります。

于 2012-06-07T06:16:33.853 に答える
1

あなたが求めているのはこのようなものですか: http://jsfiddle.net/GSEDy/3/

私はいくつかの編集を行いました。

$('ul#group').delegate('a', 'click', function(event) {
    if ($(event.target).next().is(':visible')) {
        $(event.target).next().find('ul').slideUp(250, function() {
            $(event.target).next().slideUp(250);
        });
    } else {
        $(event.target).parent().siblings().find("ul").slideUp(250);
        $(event.target).next().slideDown(250);
    }
});​
于 2012-06-07T05:57:08.573 に答える
0

私は他の解決策を好みますが、例として代替ルートを提供します。しばらく前に、縮小版を使用して clickOut 疑似イベントを作成する jQuery プラグインを作成しました。これの利点は、ユーザーがメニューの外側をクリックすると、メニューが折りたたまれることです。http://jsfiddle.net/GSEDy/7/

$('#group li').click(function (event) {
    'use strict';
    $(this).children('ul').slideToggle(250, function () {
        $(this).find('ul').hide();
    });
    $(this).siblings().children('ul').each(function () {
        $(this).slideUp(250, function () {
            $(this).find('ul').hide();
        });
    });
    event.stopPropagation();
}).clickOut(function () {
    'use strict';
    $(this).children('ul').slideUp(250, function () {
        $(this).find('ul').hide();
    });
});​
于 2012-06-07T06:28:05.713 に答える