ブートストラップ3いくつかのトグルボタン

Question

私はモバイルビューで3つのトグルボタンを持っています。それぞれのコンテンツを個別に表示することをお勧めします。つまり、あるボタンをクリックすると、もう一方のコンテンツが閉じられ、クリックされたボタンのコンテンツに置き換えられます。今すぐ各ボタンをクリックすると、他のボタンのコンテンツはどこにも残らず、お互いの下に表示されます。これを何とか切り替えることは可能ですか？

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
     Button 1 content 
    </button> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-2"> 
    <span class="sr-only">Toggle navigation</span> 
     Button 2 content 
    </button> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-3"> 
    <span class="sr-only">Toggle navigation</span> 
     Button 3 content 
    </button> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 
    Content 1 
    </div> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-2"> 
    Content 2 
    </div> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-3"> 
    Content 3 
    </div> 

Answer 1

あなたのボタン用のデータ・ターゲットは現在、3つのすべて、 "＃1、BS-ナビゲーションバー-崩壊-1" で同じです。あなたはそれらを開いて閉じたいdivのidと一致させる必要があります。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
    Button 1 content 
    </button> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
    Button 2 content 
    </button> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-3"> 
     <span class="sr-only">Toggle navigation</span> 
    Button 3 content 
    </button> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 
     Content 1 
    </div> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-2"> 
     Content 2 
    </div> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-3"> 
     Content 3 
    </div>