Javascript 确定元素是否折叠

Question

我试图在另一个元素折叠时关闭一个元素，但找不到适合我的答案。

我使用 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>

剧本

function SubMenu() {

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

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


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

Answer 1

根据Docsbootstrap崩溃使用css类表示状态

.collapse hides content

.collapsing is applied during transitions

.collapse.show shows content

您可以使用 .collapse:not(.show) 选择器来检查可折叠元素是否已折叠。

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

Answer 2

您可以在 "child collapsible elements" 的父项被隐藏时隐藏它，即 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>

Answer 3

如果您喜欢普通的 javascript 解决方案（您最初要求...），这里有一个通用方法可以适应您的情况。

我从 Bootstrap4 中提取了 html 标记并添加了一个 id 选择器。

<button class="btn btn-lightgreen" type="button" id="collapsebutton" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>

<script>
 var clickbutton = document.getElementById('collapsebutton');
 clickbutton.addEventListener('click', collapseclick);
 function collapseclick () {
   var closed =  this.getAttribute('aria-expanded');
   if (closed=='false') {
     alert("now open");
     //do stuff...
   }
 }
</script>

Javascript 确定元素是否折叠

Javascript That Determine If Element Is Collapsed

javascript

html

css

twitter-bootstrap-4