一次只允许一次数据切换以选择多个选项

Question

我是javascript和jquery的初学者，正在使用opencart和过滤器扩展。

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

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

可以单击每个选项，并且可以同时显示所有隐藏的div。 我试图一次只显示一个选项，因此例如单击选项A会打开，但如果在打开A的同时单击选项B-B会打开而A关闭。 有点像拨动开关。

我相信执行此操作的javascript在bootstap.js include中。 但是单击的每个选项都对其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>

当添加open 折叠类并将aria-expanded设置为“ false”时 ，在aria-expanded下的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>

当删除封闭的折叠类并将aria-expanded设置为“ true”，并且在以下div中，aria-expanded设置为“ true”，并且在类中将其添加到div中，还将高度从样式中删除。

“ html”代码似乎在.tag文件中：

 <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覆盖/添加到bootstrap.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> 

您网站中的问题是您有两个问题。

1. 按钮
2. 下拉菜单

我以为secon是第一个孩子。 我错了。

就您而言，他们是兄弟姐妹。 我添加了片段来代表这一点。

如果将下一个代码粘贴到您的网站中，它应该像一个超级按钮一样工作。

$('div[data-toggle="collapse"]').parent().click(function(){
    $('div[data-toggle="collapse"]').each(function(){
        //Reset values for all
        $(this).next().removeClass('in');
      })
      //No need to add anything, your site does this for you
});