1

メニューを作成するために、Twitter Bootstrap に付属しているツリーの折りたたみを使用しています。私が抱えている問題は、現在表示されているものを除いて、すべてのメニュー リストをデフォルトで折りたたむことです。メニューの例を次に示します: http://bootply.com/72086

たとえば、ユーザーが現在 Bootstrap --> Buttons --> Colors ページにいる場合、Bootstrap --> Buttons --> Colors を除くすべてのトップ レベル メニューを折りたたむ必要があり、Buttons の下の Forms は次のようになります。同じく崩壊。誰でもこれを行う方法を知っていますか?

4

2 に答える 2

3

クリックイベントを定義した後、最初にすべてを切り替えて、閉じるか折りたたむ。

//you already have this:
$('.tree-toggle').click(function () {
    $(this).parent().children('ul.tree').toggle(200);
}); 
//add this line:
$('.tree-toggle').parent().children('ul.tree').toggle(1000);

そのため、誰かがクリックするのを待たずに、最初に「すべてを行う」ように指示しています。トグル期間を好きなように変更できます。私の場合、ページが読み込まれたときに利用可能な多くのオプションをユーザーに垣間見てもらいたいだけでなく、素晴らしいアニメーション効果が得られます。

実際の例を参照してください: http://cssdeck.com/labs/fialo63a

選択したものを開いたままにしておくには、別のクラス名でマークし、すべてを閉じた後に開くように切り替えます。

HTML:

<li><label class="tree-toggle nav-header selected">Bootstrap</label>

Javascript:

//add this line:
$('.selected').parent().children('ul.tree').toggle(200);

..これは回りくどい方法になるかもしれませんが、すべてを折りたたんでから、ページをロードするときに「選択した」ものを展開しています。注: 開いたままにしたい「選択済み」セクションが最上位にない場合は、そのすべての親も展開する必要があります (つまり、それらも「選択済み」としてマークします)。

于 2015-11-05T14:38:11.697 に答える
1

以下を使用してツリーを実装してみてください。

.siblings()

以下に例を示します。

于 2013-08-14T20:58:41.537 に答える