如何阻止内容折叠？

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>

一切正常。但是，如果我单击“游戏”，则会显示游戏内容。如果我再次单击“游戏”，内容将被折叠并且什么都不会显示。如果内容已经显示，如何阻止内容折叠？

Answer 1

下面的例子会拦截按钮点击，并检查两个条件：

1. 当前部分是否已打开
2. 其他部分是否已打开

如果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>