Question

你能帮我看一下在切换jQuery时添加或删除类所需的脚本吗？

我想要达到的是，当点击class =“title”时，class="item-holder"会显示，同时，持有class="title"的div也会有 class =“expanded”所以它将是div class="title expanded"，但如果它再次切换，class="expanded"将被删除。此外，如果项目1被切换，只有项目1将显示其内容，如果让我们说项目3被点击，项目1将关闭其内容..项目3将打开其内容...它像手风琴一样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最简单的方法。

Answer 2

以下情况应该有效。

 $('.title').click(function(){
            $('.item-holder').hide(); 
            $(this).next('.item-holder').toggle();  
 });

Answer 3

$('.title').click(function(){
    $(this).toggleClass( "expanded" ).next(".item-holder").toggle();
});

这是更新的小提琴

http://jsfiddle.net/agn9Lz4u/4/

jQuery切换添加或删除类

3 个答案: