부트 스트랩 축소시 한 번에 하나씩 열기

Question

stackoverflow 코드 편집기를 사용하여 다음 코드를 만들었습니다.

내가 처음 "Google 버튼"을 클릭 나는이 "구글"버튼이이 코드에서

$(document).ready(function(e) { 
 
\t $(".btnclink").click(function(e) { 
 
     $(".btnclink").removeClass("btn-danger"); 
 
     $(this).addClass("btn-danger"); 
 
    \t var acpanels = $("#accordion-home").find(".panel-collapse.in"); 
 
\t \t acpanels.collapse("hide"); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <br /><br /> 
 
    <div class="text-center"> 
 
    <button class="btn btnclink" data-toggle="collapse" data-target="#youtube">Open Youtube</button>&nbsp;&nbsp; 
 
    <button class="btn btnclink" data-toggle="collapse" data-target="#google">Open Google</button>&nbsp;&nbsp; 
 
    <button class="btn btnclink" data-toggle="collapse" data-target="#twitter">Open Twitter</button> 
 
    <button class="btn btnclink" data-toggle="collapse" data-target="#google">Open Google</button> 
 
    </div> 
 
    <br /><br /> 
 
    
 
    <h2 class="h1 text-center">Bootstrap Collapse</h2> 
 
    <div class="mt50"> 
 
     <div class="panel-group" id="accordion-home"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#youtube"> 
 
          Youtube 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="youtube" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#google"> 
 
          Google 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="google" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#twitter"> 
 
          Twitter 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="twitter" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

, 그것은 구글 붕괴 패널을 엽니 다. 그리고 두 번째 "Google 버튼"(Google 패널이 열려있는 동안)을 클릭하면 Google Panel이 숨겨서는 안되며 열려 있어야합니다. 그러나 지금은 숨어 있습니다.

이 문제를 해결할 수있는 해결책을 확인하고 조언 해주십시오.

Answer 1

단추의 경우 수동으로 패널을 열어야하며 대상이 같으면 패널을 숨기지 않아야합니다.
또한 붕괴를 제어하지 않도록 단추에서 data-toggle="collapse"을 제거하십시오.

는 아래 수정 된 코드

$(document).ready(function(e) { 
 
    $(".btnclink").click(function(e) { 
 
     $(".btnclink").removeClass("btn-danger"); 
 
     $(this).addClass("btn-danger"); 
 
     var target = $(this).data("target"); 
 
    
 
      var acpanels = $("#accordion-home").find(".panel-collapse.in").not(target); 
 
      acpanels.collapse("hide"); 
 
      $(target).collapse("show"); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <br /><br /> 
 
    <div class="text-center"> 
 
    <button class="btn btnclink" data-target="#youtube">Open Youtube</button>&nbsp;&nbsp; 
 
    <button class="btn btnclink" data-target="#google">Open Google</button>&nbsp;&nbsp; 
 
    <button class="btn btnclink" data-target="#twitter">Open Twitter</button> 
 
    <button class="btn btnclink" data-target="#google">Open Google</button> 
 
    </div> 
 
    <br /><br /> 
 
    
 
    <h2 class="h1 text-center">Bootstrap Collapse</h2> 
 
    <div class="mt50"> 
 
     <div class="panel-group" id="accordion-home"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#youtube"> 
 
          Youtube 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="youtube" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#google"> 
 
          Google 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="google" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h4 class="panel-title"> 
 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-home" href="#twitter"> 
 
          Twitter 
 
         </a> 
 
        </h4> 
 
       </div> 
 
       <div id="twitter" class="panel-collapse collapse"> 
 
        <div class="panel-body"> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>