0

私は Twitter Bootstrap からの fluid.html の例を持っています - 左側の nav-list は、ここ数時間私に頭痛の種を与えているものです。次のいずれかまたは両方を行う必要があります。

  1. nav-list をフィルタリングします - 多かれ少なかれこれが何をするか: http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/ - それはうまく動作しますがこのサイトでは、Bootstrap の nav-list の要素を外観を壊さずにフィルター処理することはできません。

  2. 要素の 1 つをクリックして、<li>次まですべてを切り替えます。だから私が持っている場合：<li class="nav-header"><li class="nav-header">

    • カテゴリー1
      • リンク 1
      • リンク 2
      • リンク 3
    • カテゴリー2
      • リンク 4
      • リンク 5
      • リンク 6

...カテゴリ 1 をクリックすると、リンク 1、2、および 3 が切り替わり、カテゴリ 2 をクリックすると、リンク 4、5、および 6 のみが切り替わります。jQuery Collapse プラグインを試してみましたが、nav-list スタイルが壊れていました。また、 s の間<div>にすべての s があるトグルを試みましたが、nav-list スタイルも壊れました。すべての を同じ ID で切り替えるというアイデアがありましたが、jQuery またはプレーンな JavaScript でそれを行う方法がわかりません。<li><li class="nav-header"><li>

これらのいずれかまたは両方を行う方法はありますか？前もって感謝します。

4

2 に答える 2

0

さて、ようやくjQueryと最初の例でリストフィルタリングを修正しました。問題は、jQuery がドキュメントの最後に読み込まれ、スクリプトがフォームの前に読み込まれる必要があったことです。だから、動作します:)

于 2012-09-21T19:59:02.483 に答える
0

child があるかどうかを確認<ul>し、jQuery でクリックして切り替えます。

<script>
    $('li').on('click', function() {
        $(this).children('ul').toggle();
    });
</script>
于 2012-09-21T18:18:11.843 に答える