jQuery手风琴问题咨询：已展开标签无法关闭且无法互斥展开

我来帮你搞定这两个手风琴组件的小问题～先看看原代码的核心问题：你每次点击标题时，都会先强制隐藏所有内容区域，再强制显示当前内容——这就导致不管当前内容是不是已经展开，点击后都会保持展开状态，自然没法收起；不过你已经做了“其他标签自动收起”的雏形，只是缺了判断当前状态的逻辑。

直接上修改后的代码，我会逐行给你解释：

$(function(){ 
  var heading = $('h1'); 
  heading.on('click', function(event){ 
    var targetHeading = $(this); // 用this更可靠，始终指向当前点击的h1元素
    var targetContent = targetHeading.next('div.content'); 
    
    // 判断当前内容是否处于展开状态（没有hidden类）
    if (!targetContent.hasClass('hidden')) {
      // 如果已经展开，直接添加hidden类收起它
      targetContent.addClass('hidden');
    } else {
      // 如果是收起状态，先隐藏所有内容，再展开当前的
      $('div.content').addClass('hidden');
      targetContent.removeClass('hidden');
    }
  }) 
});

关键修改点说明： #

• 替换$(event.target)为$(this)：event.target可能指向h1内部的子元素（比如嵌套的span），而this始终绑定到触发事件的h1标签，逻辑更稳定。
• 增加状态判断：通过hasClass('hidden')检查当前内容的显示状态，分别处理“收起当前”和“展开当前+关闭其他”两种场景。

这样修改后，就能同时满足你的两个需求：

• 点击已处于展开状态的标签时，该标签会自动收起
• 点击任意收起的标签时，其余所有标签会自动收起，只展开当前的

另外，记得给所有div.content默认加上hidden类，保证初始状态下所有标签都是收起的哦～

内容的提问来源于stack exchange，提问作者Joseph Cornelio