jQuery 切换添加或删除类

Question

你能帮我算出在 toggle jQuery 中添加或删除类所需的脚本吗？

我想要实现的是，当单击 class="title"时，class="item-holder" 将同时显示包含class="title" 也会有class="expanded"所以它将是 div class="title expanded"，但如果再次切换，class="expanded" 将被删除。同样，如果切换元素 1，则只有元素 1 会显示其内容，如果单击元素 3，则元素 1 将关闭其内容……而元素 3 将打开其内容……就像 Accordion bootstrap 3。但不幸的是我不能在上面使用 bootstrap 3。

here's what i have as of now.

任何人都可以告诉我正确的代码吗？

非常感谢您的帮助。谢谢。

Answer 1

像这样的东西应该可以工作:http://jsfiddle.net/agn9Lz4u/1/

$('.title').click(function(){
  $('.item-holder').hide()
  $('.title').removeClass('expanded')

  var title = $(this).addClass('expanded')
  var stage = title.data('stage');
  $(stage).show() 
});

还要注意 HTML 的变化:

<div class="title" data-stage="#stage-1">

和

<div class="item-holder" id="stage-1">

基本上，您需要在单击标题时重置所有内容 - 删除展开的类并隐藏所有元素持有者 div。然后你只显示你想要的元素持有人并将扩展类重新添加到你刚刚点击的标题。

通过在数据元素中保存一个选择器，您可以在点击标题时确切地知道应该打开哪个 div。有多种方法可以实现这一点，但对于您已经拥有的 HTML 和您开始使用的 JS，这可能是最简单的方法。