Question

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

我正在尝试一次只显示一个数据切换。

过滤器扩展程序有多个选项，如类别，大小，类别，颜色等。单击时每个选项都会显示隐藏的div，当再次单击时会隐藏它。

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

我相信这样做的javascript是在bootstap.js包含的。但点击的每个选项都是这样的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>

当打开折叠类并且aria-expanded设置为“false”时，在下面的div中，aria-expanded设置为“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，以便我们可以看到它是如何工作的

希望这会有所帮助：）

#include <unordered_map>

lemon::ListDigraph lg;
lemon::ListDigraph::NodeMap<std::string> nodeColor(lg);
std::unordered_map<std::string, lemon::ListDigraph::Node> color2node;

lemon::ListDigraph::Node n = lg.addNode();
nodeColor[n] = "red";
color2node.emplace("red", n);

lemon::ListDigraph::Node m = lg.addNode();
nodeColor[m] = "green";
color2node.emplace("green", m);

lemon::ListDigraph::Node x = node2color.at("red");

//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;
}

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

按钮
下拉列表

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

在你的情况下，他们是兄弟姐妹。我添加了我的代码段来表示这一点。

如果您在网站中粘贴下一个代码，它应该像魅力一样。

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

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

2 个答案: