如果其中一个手风琴元素被折叠，如何隐藏一个块？

Question

使用引导折叠函数，只有当块A、B、C被折叠时，我才试图显示块D。我做错了什么？

+-----------+-----------+-----------+
|  Block A  |  Block B  |  Block C  |
+-----------+-----------+-----------+
|              Block D              |
+-----------------------------------+

这是代码：

   <div id="tbls" class="row">
    <div id="tbl-1"class="panel col-md-4">
     <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-1">Block A</a>
     <div id="start-1" class="panel-collapse collapse">111</div>
    </div>
    <div id="tbl-2"class="panel col-md-4">
     <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-2">Block B</a>
     <div id="start-2" class="panel-collapse collapse">222</div>
    </div>
    <div id="tbl-3"class="panel col-md-4">
     <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-3">Block C</a>
     <div id="start-3" class="panel-collapse collapse">333</div>
    </div>
   </div>

和javascript：

<script>
    $("div[id*='start-']").on('click',function(){
        if ( !$("div[id*='start-']").hasClass("in") ) {
            $("#txt").addClass("hidden");
        }
    });
    $('.panel-collapse').on('hidden.bs.collapse', function () {
        $("#txt").removeClass("hidden");
    });
</script>

有什么想法吗？

Answer 1

在hidden.bs.collapse上，您没有检查是否所有元素都已折叠。而不是click事件，您可以使用shown事件。

$('.panel-collapse').on('shown.bs.collapse', function() {
  $("#txt").addClass("hidden");
});
$('.panel-collapse').on('hidden.bs.collapse', function() {
    var allhidden = $(".panel-collapse").hasClass("in");
    $("#txt").toggleClass("hidden", allhidden);
});

Answer 2

​

    $(".panel-collapse").on('show.bs.collapse',function(){   
            $("#txt").addClass("hidden");
        
    });
    $('.panel-collapse').on('hidden.bs.collapse', function () {
    
        if($("div[id*='start-'].in").length == 0)
          $("#txt").removeClass("hidden");
        
          
    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="tbls" class="row">
 <div id="tbl-1"class="panel col-md-4">
  <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-1">
  <div id="start-1" class="panel-collapse collapse">111</div>
 </div>
 <div id="tbl-2"class="panel col-md-4">
  <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-2">
  <div id="start-2" class="panel-collapse collapse">222</div>
 </div>
 <div id="tbl-3"class="panel col-md-4">
  <a data-toggle="collapse" class="collapsed btn btn-prime btn-block" data-parent="#tbls" href="#start-3">
  <div id="start-3" class="panel-collapse collapse">333</div>
 </div>
</div>
<div id="txt">Show me if no collapsed in</div>

​