Javascript, das bestimmt, wenn Element kollabiert ist

Question

Ich versuche, ein Element zu schließen, wenn ein anderes Element zusammenbricht, aber ich kann keine Antwort finden, die für mich funktioniert.

Ich aktualisiere die Struktur mit Bootstrap und JavaScript sieht es nicht wie das echte Geschäft. Aber wenn ich das erste Untermenü (<div class="collapse list-group-sub-menu spacer" id="subMenu1">) zusammenbringe, möchte ich auch das erste Untermenü und das zweite Untermenü ausblenden. Für mein Projekt sind die Abteilungen alle in Reihen, sonst hatte ich schon eine Methode.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <table class="table table-responsive"> 
       <tbody> 
        <tr> 
         <td class="col-lg-10"> 
          <div id="bar1"> 
           <div class="list-group panel"> 
            <a class="list-group-item list-group-item-warning">Menu</a> 
            <!--"collapse in" zodat hij van het begin al open is--> 
           </div> 
          </div> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class="collapse in " id="sidebar1"> 
          <!--Javascript klik hier--> 
          <a href="#subMenu1" onclick="SubMenu()" class="list-group-item" data-parent="#sidebar1" data-toggle="collapse">Item 1 <i class="fa fa-caret-down"></i></a> 
          <a href="#" class="list-group-item">Item 2</a> 
          <a href="#" class="list-group-item">Item 3</a> 
          <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a> 
         </div> 
        </td> 
       </tr> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class="collapse list-group-submenu spacer" id="subMenu1"> 
          <a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.1</a> 
          <a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.2</a> 
          <a href="#subSubMenu1" onclick="SubSubMenu()" class="list-group-item" data-toggle="collapse">Item 1.3 <i class="fa fa-caret-down"></i></a> 
          <a href="#" class="list-group-item">Item 1.4</a> 
          <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a> 
         </div> 
        </td> 
       </tr> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class="collapse list-group-submenu list-group-submenu-1 spacer" id="subSubMenu1"> 
          <a href="#" class="list-group-item">Item 1.3.1</a> 
          <a href="#" class="list-group-item">Item 1.3.2</a> 
          <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div class="col-md-6"> 
      <table class="table table-responsive"> 
       <tbody> 
        <tr> 
         <td class="col-lg-10"> 
          <div id="bar2"> 
           <div class="list-group panel"> 
            <a class="list-group-item list-group-item-warning">Menu</a> 
            <!--"collapse in" zodat hij van het begin al open is--> 
           </div> 
          </div> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class="collapse in " id="sidebar2"> 
          <!--Javascript klik hier--> 
          <p class="list-group-item" data-parent="#sidebar2">Item 1</p> 
          <p class="list-group-item">Select 
           <input type="checkbox" /> </p> 
          <p class="list-group-item">Select 
           <input type="checkbox" /> 
          </p> 
          <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a> 
         </div> 
        </td> 
       </tr> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class="collapse list-group-submenu" id="subMenu2"> 
          <p class="list-group-item" data-parent="#subMenu2">Select 
           <input type="checkbox" /> 
          </p> 
          <p class="list-group-item" data-parent="#subMenu2">Select 
           <input type="checkbox" /> 
          </p> 
          <p class="list-group-item">Item 1.3</p> 
          <p class="list-group-item">Select 
           <input type="checkbox" /> 
          </p> 
          <p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p> 
         </div> 
        </td> 
       </tr> 
      </table> 
      <table class="table table-responsive"> 
       <tr> 
        <td> 
         <div class=" collapse list-group-submenu list-group-submenu-2" id="subSubMenu2"> 
          <p class="list-group-item">Select 
           <input type="checkbox" /> 
          </p> 
          <p class="list-group-item">Select 
           <input type="checkbox" /> </p> 
          <p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

SKRIPTE

function SubMenu() { 

    $('#subMenu1').collapse("toggle"); 

    $('#subMenu1').is('collapse', function() { 
     SubSubMenu(); 
    }); 
} 


function SubSubMenu() { 
    $('#subSubMenu1').collapse("toggle"); 
    $('#subSubMenu2').collapse("toggle"); 
} 

Answer 1

Nach Docs Bootstrap Zusammenbruch Klassen Verwendung CSS, um anzuzeigen, Zustand

.collapse versteckt Inhalt

.collapsing ist

.collapse.show zeigt Inhalte während der Übergänge angewendet

Sie .collapse:not(.show) Wähler, wenn zusammenklappbare Element kollabiert ist zu prüfen, verwenden können.

if($('#subMenu1').is('.collapse:not(.show)')) { 
    // do smth 
} 

Answer 2

Sie könnten "Kind zusammenklappbare Elemente", wenn seine Eltern verstecken wird ausgeblendete worden, das heißt on('hidden.bs.collapse', function) finden Sie folgenden Ausschnitt:

$("#collapse1").on('hidden.bs.collapse', function(){ 
 
    $("#collapse1 .collapse").collapse('hide'); 
 
});

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

 
<div class="panel-group"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a id="lnk1" data-toggle="collapse" data-target="#collapse1" href="#collapse1">Menu 1</a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapse1" class="panel-collapse collapse"> 
 
     <div class="panel panel-default"> 
 
      <h3 class="panel-title"> 
 
      <a data-toggle="collapse" href="#collapse2">Sub menu 1</a> 
 
      </h3> 
 
     </div> 
 
     <ul class="list-group"> 
 
     <li class="list-group-item"> 
 
      <div id="collapse2" class="panel-collapse collapse"> 
 
      <ul class="list-group"> 
 
      <li class="list-group-item">Item 1</li> 
 
      <li class="list-group-item">Item 2</li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>