一次只允许一个数据切换用于多个选项

Posted 2023-03-24

【中文标题】一次只允许一个数据切换用于多个选项

【英文标题】：Only allow one data-toggle at a time for multiple options

【发布时间】：2018-09-23 22:46:37

【问题描述】：

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

当打开 collapsed 类添加并且 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>

当关闭 collapsed 类被移除并且 aria-expanded 设置为 "true" 并且在下面的 div 中 aria-expanded 设置为 "true" 和 in 类被添加到 div，height 也被从样式中删除。

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

一次只打开一个的最佳方法是什么？是否有一个简单的解决方案，或者可能会覆盖/添加到 bootstrap.js（如果是的话）的 javascript 以允许一次只允许一个折叠的类？

任何帮助将不胜感激！

【问题讨论】：

您需要添加一个Minimal, Complete, and Verifiable 示例，以便我们为您提供帮助。

听起来很接近，但我真的需要看一个真实的例子来实际调试并给你一个答案。

所有元素都有collapse 的类？

aria-expanded="false" 表示关闭，aria-expanded="true" 表示打开？

我已经做出了回答。如果您想在那里继续对话，以便我们可以对其进行处理并在必要时进行改进:)​​

【参考方案1】：

这是一个没有改变 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>

您网站中的问题是您有两个元素存在问题。

按钮 下拉菜单

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

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

如果您将下一个代码粘贴到您的网站中，它应该会像魅力一样发挥作用。

$('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
);

【讨论】：

这看起来很完美，我不明白为什么它不适合我。 jquery可能会否决吗？它忽略了java脚本并允许许多.in.

这很难说，我建议你添加一个活生生的例子，这样我可以帮助你调试它:)

它似乎没有效果我认为有什么阻碍了它？

你把它放在哪里了？

不知道怎么回事，我什至无法为您的标题设置事件侦听器。您可以在控制台中复制粘贴我的代码并查看它是否有效。但我找不到阻止它的原因

【参考方案2】：

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

【讨论】：

不知道为什么，但这给了我一个语法错误并且不起作用？

可能是因为 ES6 语法。我已经更新了对 ES5 的回答。再试一次。