부트 스트랩 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

버튼의 데이터 타겟은 현재 "# bs-navbar-collapse-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>