-1

最初の免責事項: 1) 初めての質問です。これが正しく行われていることを願っています。そうでない場合は申し訳ありません。2) 英語は私の母国語ではないので、間違っていたらすみません。3) 検索しても答えが見つからない。

言葉で説明しようとすると、多くの言葉を意味しますが、bootply はすべてを言うことができます:

http://www.bootply.com/EBIMFQ5jEC

基本的に、私が欲しいのはこれを除いてほとんど機能しています:たとえば、「タイトル3」をクリックすると(「タイトル1」または「タイトル2」をクリックした後)、「最初/2番目の列(s)が非表示になります」 )」なので、「3 番目の列」だけが表示されます (もちろんその逆も同様です)。これが明確であることを願っています。

私はdata-parentでいくつかのことを試しました（これなど：最初の3つのボタンに追加されたhttp://www.bootply.com/pgoT2IPG8Ddata-parent="#collapse1"）が、何も達成できませんでした...

助けてくれてありがとう！

4

1 に答える 1

2

必要なものを取得するには、確かに「data-parent」を設定する必要がありますが、これには「.panel」クラスも必要であることに注意してください。ドキュメントから：

セレクターが提供されている場合、この折りたたみ可能なアイテムが表示されると、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作と同様 - これはパネル クラスに依存します)

デモ: http://www.bootply.com/qhs4dQbFZK

そのため、折りたたみ可能なアイテムを.panelクラスでラップする (またはプラグインを変更する) 必要があります。参照: https://github.com/twbs/bootstrap/issues/15341

次に、折りたたみ可能なアイテムは次のようになります。

<div class="panel">        
    <div class="col-md-2 collapse" id="collapse1">
        <div class="btn-group-vertical btn-block" data-toggle="buttons">
            <button class="btn btn-default btn-lg" href="">First subtitle column</button>
            <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button>
            <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>       
            <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button>
        </div>
    </div>
</div>

ボタンは次のdata-parent属性を取得する必要があります。

<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button>

また、アイテムは ( #menurow)の前に設定された id 内にラップする必要があります。

<div class="row" id="menurow"></div>

クラスはいくつかのスタイル ルールも設定していることに注意して.panelください。これは、状況に応じて上書き (元に戻す) する必要があります。たとえば、次のようになります。.panel {margin-bottom: 0;}

于 2014-12-11T12:46:37.767 に答える