63

Bootstrap 折りたたみプラグインを変更して、アコーディオンをクリックして (開く)、アコーディオン内の他のアイテムを自動的に閉じるかどうかを指定できるようにしようとしています (アコーディオン内の複数のアイテムを同時に開くことができるようにするため)。

アコーディオンに次のような新しいデータ属性を作成したいdata-collapse-type="auto|manual"

ブートストラップ jQuery プラグインは、私のスキル レベルでは少し高度です。私がいじる必要がある最も関連性の高い部分は、52行目にあるようactives.collapse('hide')です。'data-collapse-type="manual"' が設定されている場合は、それが発生したくありません (属性または設定を省略してautoも、デフォルトの動作を維持する必要があります)。

私は実験してきたjsfiddleを作成しました。

誰でもこれで私を正しい軌道に乗せることができますか?

4

4 に答える 4

222

実際、コードを変更する必要はありません。twitterbootstrap サイトから次のステートメントをよく読んでください。

data-toggle="collapse" と data-target を要素に追加するだけで、折りたたみ可能な要素のコントロールを自動的に割り当てることができます。data-target 属性は、折りたたみを適用する CSS セレクターを受け入れます。必ず折りたたみ可能な要素にクラス collapse を追加してください。デフォルトで開くようにしたい場合は、追加のクラスを追加してください。

したがって、を使用する代わりに、をdata-parent='#idofAccordion'使用しますdata-target='#idofCollapseItem'。

それは完全に機能するはずです。

これがプランカーのデモです

于 2012-07-25T21:33:13.760 に答える
5

私はあなたのフィドルをフォークして更新しました。

.show関数に移動するだけで、コメントも書きました。

http://jsfiddle.net/2Rnpz/

于 2012-04-04T22:04:46.020 に答える
-3

一度に 1 つのアコーディオンのみを開く (残りを折りたたむ) ための手法は、両方の data-parent="#accordion" data-target="#collapseOne" を配置するため、次のようになります。

<a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

プランカーで見ることができます: http://plnkr.co/edit/56iXtA?p=preview

于 2013-07-20T18:46:21.477 に答える