Javascript 如何使用JQuery进行切换

我有一个手风琴，我可以在每次点击时打开，但我如何才能再次关闭它

HTML:

---

Fiddle:

您不需要显式地检查活动类的出现，然后执行类的添加/删除决策。您可以通过

toggleClass

实现这一点：

accordion_head.on('click', function(event) {
 event.preventDefault();
  $('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
  $(this).next().stop(true,true).slideToggle('normal');
  $(this).toggleClass('active');
});

$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');

---

请参见此处更新的fiddle:

使用教程可以做的最好的事情是学习，而不是在未阅读代码的情况下复制和粘贴。就这么简单：

我在脚本末尾添加

else

语句：

      else {
            $(this).next().stop(true,true).slideToggle('normal');
            $(this).removeClass('active');
        }

---

将

addClass

的所有实例替换为

toggleClass

，并删除类处于活动状态时的条件

我们正在尝试删除已使用

toggleClass（）

添加的类，并且不需要任何if条件块

accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed

---

如果完全删除，您可以同时使用

滑动切换

和

切换类

：

accordion_head.on('click', function(event) {
 event.preventDefault();
  $('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
  $(this).next().stop(true,true).slideToggle('normal');
  $(this).toggleClass('active');
});

$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');

---

请将您编写的JavaScript代码放入问题本身。JSFIDLE链接是一个不错的补充，但我们的目标是解决有关堆栈溢出的自包含问题。现在，如果JSFIDLE由于某种原因离线，您的问题将无法独立解决。听起来不错。谢谢。我能提出一个修正案吗？更改

$（'.sub-menu'）。而不是（$（this）.next（））。slideUp（'normal'）到
$（'.sub-menu'）。不是（$（this）.next（））.slideUp（'normal'）.prev（）.removeClass（'active'）。我喜欢你的解决方案自动折叠以前的accordian的方式，但我认为它应该删除活动类，因为它不再打开。只是一个想法。你的小提琴更新了吗？@War10ck:那好多了。请随时更新我的答案：）@milindiantwar真棒。非常感谢。它已经被编辑过了。是的，网络上到处都是巨魔：D
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');