确定元素是否崩溃的Javascript

时间:2017-04-19 13:00:23

标签: javascript html css twitter-bootstrap-4

我正试图在另一个元素崩溃时关闭一个元素,但我找不到适合我的答案。

我使用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");
}

3 个答案:

答案 0 :(得分:2)

根据Docs bootstrap collapse,使用css类来指示状态

  

.collapse隐藏内容

     转换期间应用

.collapsing

     

.collapse.show显示内容

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

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

答案 1 :(得分:0)

你可以隐藏儿童可折叠元素&#34;如果隐藏了其父级on('hidden.bs.collapse', function),请参阅以下代码段:

&#13;
&#13;
$("#collapse1").on('hidden.bs.collapse', function(){
  $("#collapse1 .collapse").collapse('hide');
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

如果您喜欢简单的原始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>