对于多个选项，一次仅允许一个数据切换

Question

我是一个初学者与javascript和jQuery，我使用opencart和过滤器扩展。

我试图一次只显示一个数据切换。

过滤器扩展有多个选项，如类别、大小、类别、颜色等。单击每个选项时会显示一个隐藏的div，再次单击时会将其隐藏。

可以单击每个选项，同时显示所有隐藏的div。我试图一次只显示一个选项，因此，例如，单击选项a，它将打开，但如果在a打开时单击选项B，则B将打开，a将关闭。有点像开关。

我相信javascript是在bootstap中实现的。js包括。但单击的每个选项都会对其html" target="_blank">html执行以下操作：

单击某个选项时（打开）：

<div class="af-container"> 
<div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s"> 
<p>Category:</p><span></span> 
</div> 
<div aria-expanded="false" id="s" class="af-elements collapse" style="height: 0px;"> 
</div> 
</div>

当打开折叠类被添加并且咏叹调扩展被设置为"false"时，在咏叹调扩展下面的div中也被设置为"false"。

打开选项时，单击（关闭）：

<div class="af-container"> 
<div class="af-heading af-collapse" data-toggle="collapse" aria-expanded="true" data-target="#s"> 
<p>Category:</p><span></span> 
</div> 
<div aria-expanded="true" id="s" class="af-elements collapse in" style=""> 
</div> 
</div>

当关闭折叠类被删除，咏叹调扩展被设置为“真”，在下面的div咏叹调扩展被设置为“真”，在类被添加到div时，高度也从样式中删除。

“html”代码似乎在一个范围内。标记文件：

 <af_group>
    <div class="af-container">
        <div class="af-heading af-collapse" data-toggle="collapse" data-target="#{filter.name}_{filter.group_id}_{opts.filter_id}" aria-expanded="true">
            <p class="title">{filter.caption}</p><span></span>
        </div>
        <div id="{filter.name}_{filter.group_id}_{opts.filter_id}"  class="af-elements collapse {filter.collapse == '0'?'in':''}" aria-expanded="true">
            <div class="af-wrapper">
                <div data-is='af_group_{filter.type}' filter={filter} filter_id={opts.filter_id}></div>
            </div>
        </div>
    </div>
    </af_group>

一次只打开一个窗口的最佳方式是什么？是否有一个简单的解决方案，或者可能是覆盖/添加到引导的javascript。例如，js（如果是这样的话）一次只允许一个折叠的类？

任何帮助将不胜感激！

Answer 1

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse', '.collapse', function(e) {
    $myGroup.find('.collapse.show').collapse('hide');
});

Answer 2

这是一个不更改aria标记的示例。

我添加了一些css，这样我们就可以看到它是如何工作的

希望这有帮助：）

//Event listener
$('div[data-toggle="collapse"]').parent().click(function() {
  $('div[data-toggle="collapse"]').each(function() {
    //Reset values for all
    $(this).addClass('collapsed');
    $(this).next().removeClass('in');
  })
  //Change values for the selected one
  $(this).children().removeClass('collapsed');
  $(this).children().next().addClass('in');
})

.af-container {
  background-color: pink;
  border: 1px lightblue solid;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
}

.af-container .collapsed {
  background-color: lightblue;
  border: 1px pink solid;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dropdown {
  background-color: tomato;
  border: 1px pink solid;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 65px;
  display: none;
}

.in{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">
  </div>
  <div class="dropdown"></div>
</div>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">  </div>
  <div class="dropdown"></div>

</div>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">  </div>
  <div class="dropdown"></div>

</div>