2017-09-14 64 views
1

正如您在小提琴中所看到的,兩個面板組可以同時打開。如果我點擊一個,我怎麼能使另一個崩潰?如何在另一個打開時使面板組崩潰?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container container-table"> 
 

 
\t <div class="row"> 
 
\t <div id="menucontainer" class="text-center col-lg-2 col-lg-offset-5"> 
 
\t 
 
    <div class="panel-group" id="neubau"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <button id="accordion1" data-toggle="collapse" data-parent="#neubau" href="#collapseOne" class="btn btn-default">Neubau</button> 
 
       </h4> 
 
       </div> 
 
       <div id="collapseOne" class="panel-collapse collapse"> 
 
       <ul class="list-group"> 
 
        <li class="list-group-item"><button id="neuzupf" type="button" class="btn btn-default one">Zupfinstrumente</button> 
 
\t \t \t \t \t </li> 
 
        <ul class="list-group"> 
 
         <li class="list-group-item"><button id="neustreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul> 
 

 
         
 
       </ul> 
 
       </div> 
 
      </div> 
 
       </div> 
 
       
 
       
 
    <div class="panel-group" id="restaur"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <button id="accordion2" data-toggle="collapse" data-parent="#restaur" href="#collapseTwo" class="btn btn-default">Restaurierung</button> 
 
       </h4> 
 
       </div> 
 
       <div id="collapseTwo" class="panel-collapse collapse"> 
 
       <ul class="list-group"> 
 
        <li class="list-group-item"><button id="restaurzupf" type="button" class="btn btn-default one">Zupfinstrumente</button> 
 
\t \t \t \t \t </li> 
 
        <ul class="list-group"> 
 
         <li class="list-group-item"><button id="restaurstreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul> 
 

 
         
 
       </ul> 
 
       </div> 
 
      </div> 
 
       </div> 
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 

它似乎有事情做與數據父母,可我就是想不通。在JQuery中的解決方案也可以。謝謝!

+0

JSFiddle please !!! –

回答

1

使數據父項相同,因此它可以像兄弟姐妹一樣工作並按照您的需要工作。

+1

謝謝!通過改變所有的數據父母到班級「.panel-group」它的工作! –

+0

歡迎。這裏是一個例子,就像你在尋找https://jsfiddle.net/yashpal_sindhav/ucfta9sj/ –