web-dev-qa-db-ja.com

Twitterの修正Bootstrapプラグインを折りたたみ、アコーディオンを開いたままにします

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

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

bootstrap jQueryプラグインは私のスキルレベルでは少し高度です。混乱する必要がある最も重要な部分は、52行目actives.collapse('hide')にあるようです。 'data-collapse-type = "manual"'が設定されている場合は、これを行わないでください(属性を省略するか、autoを設定すると、デフォルトの動作が維持されます)。

jsfiddleを試したところ を作成しました。

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

61
Hugh Jass

私はあなたのフィドルを分岐して更新しました。

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

http://jsfiddle.net/2Rnpz/

5
burak altundal

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

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

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

完璧に機能するはずです。

plunkerのデモ

216
maxisam

質問は特定のバージョンのBootstrapに言及していなかったため、ここにbootstrap 4ソリューション:data-parent="#accordion"属性を持つタグからdata-toggle="collapse"を削除します。 data-parent=#accordion"ビットを取り除いたCollapseドキュメントからの例。

ブートプライ: https://www.bootply.com/3wV4WbzBtT#

2
vzR