0

a 内に A、B、C という 3 つの項目の順序付けられていないリストがあり<div>ます。オプションAを選択すると、同じ中にP、Q、Rのリストが再び表示され、<div>Bを選択すると、X、Y、Zの順不同リストが表示され、さらに戻るボタンもあるはずです.

<div>
    <ul>
        <li><a href="#">A</li>
        <li><a href="#">B</li>
        <li><a href="#">C</li>
    </ul>
<div>

オプション A を選択すると、同じリスト内に次のリストが表示されます。<div>

    <ul>
        <li><a href="#">P</li>
        <li><a href="#">Q</li>
        <li><a href="#">R</li>
    </ul>

そして、このように、最大​​で 3 ～ 4 レベル下がっていFrom A->P,Q,Rます。From P->D,E,F. From D->S,R,T同様に。すべて同じ<div>タグ内に表示する必要があります。

ブートストラップを検索しましたが、期待した結果が得られませんでした。これはブートストラップで実行できますか。そうでない場合、jQuery でこの問題にどのようにアプローチできますか?

4

1 に答える 1

0

jquery を使用してツリー ビュー レイアウトを探している場合は、次のコードを試してください。

$('.tree li').each(function(){
        if($(this).children('ul').length > 0){
                $(this).addClass('parent');     
        }
});

$('.tree li.parent > a').click(function(){
        $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
});

デモとソース: http://www.webstutorial.com/jquery-treeview-list/jquery

于 2013-08-26T14:03:30.927 に答える