Question

我尝试使用Bootstrap 4的折叠系统通过顶部的一系列按钮显示内容。

这是我的导航栏：

<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#games">
    Games
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#movies">
    Movies
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#music">
    Music
</div>

下面我有内容：

<div id="games" class="collapse show">
    <!-- content -->
</div>

<div id="movies" class="collapse">
    <!-- content -->
</div>

<div id="music" class="collapse">
    <!-- content -->
</div>

然后在底部有一个脚本可以隐藏任何崩溃的内容。

<script>
    $('.port-item').click(function(){
        $('.collapse').collapse('hide');
    });
</script>

一切正常。但是，如果我点击＆＃34;游戏，＆＃34;将显示游戏内容。如果我点击＆＃34;游戏＆＃34;再次，内容将被折叠，并且不会显示任何内容。如果内容已经显示，我该如何阻止内容崩溃？

Answer 1

以下示例将拦截按钮单击，并检查两个条件：

当前部分是否已打开
是否已打开任何其他部分

如果1为true且2为false，则会停止该事件并阻止关闭当前部分。否则，collapse组件将照常运行。

$('.port-item[data-toggle="collapse"]').on('click', function(event) {
  var target = $(event.target).data('target');
  
  var isOpen = $(target).hasClass('show');
  var isOtherOpen = !! $(target).siblings('.collapse.show').length;
  
  if (isOpen && ! isOtherOpen) event.stopPropagation();
  
  if (isOtherOpen) $('.collapse').collapse('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#games">
  Games
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#movies">
  Movies
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#music">
  Music
</div>

<div id="games" class="collapse show">
  <p>Showing games</p>
</div>

<div id="movies" class="collapse">
  <p>Showing movies</p>
</div>

<div id="music" class="collapse">
  <p>Showing music</p>
</div>

如何阻止内容崩溃？

1 个答案: