確定元素是否被摺疊的Javascript

-1

我試圖在另一個元素崩潰時關閉元素，但是我找不到適合我的答案。確定元素是否被摺疊的Javascript

我使用Bootstrap和JavaScript更新結構，它看起來不像真正的交易。但是當我摺疊第一個子菜單（<div class="collapse list-group-sub-menu spacer" id="subMenu1">）時，我想摺疊第一個子菜單和第二個子菜單。對於我的項目來說，各個部門都是排隊的，否則我已經有了一個方法。

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>

SCRIPTS

function SubMenu() { 

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

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


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

來源

2017-04-19 B Zwikker

您可以加入一些HTML代碼藏漢？ – NullDev

@NullDev我更新了我的帖子，提供了更多信息 –

'.collapse'是如何實現的？ –

根據Docs引導崩潰使用CSS類來表示狀態

.collapse隱藏內容

.collapsing過渡

.collapse.show時應用的是顯示內容

您可以使用.collapse:not(.show)選擇檢查，如果收縮元件處於摺疊狀態。

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

來源

2017-04-19 13:50:27

這爲我解決。謝謝。 –

@BZwikker沒問題。 –

可以隱藏時，其父是被牆根「子可摺疊元素」，即on('hidden.bs.collapse', function)，請參見下面的代碼片段：

$("#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>

來源

2017-04-19 13:53:34 Alessandro

確定元素是否被摺疊的Javascript

回答

相關問題