FAQ手风琴点击两次才展开及点击触发图标旋转问题求解

手风琴功能修复方案 #

问题1：点击两次才展开/收起的修复

原有JS逻辑存在两处核心错误：

• 全局强制给所有回答元素添加active类，仅当目标回答已存在active类时才执行切换操作，首次点击时目标回答无该类，因此不会触发展开，第二次点击才满足条件
• active类错误绑定到回答元素，而图标旋转的CSS规则绑定在标题的.bracket-button.active类上，导致状态无法联动

替换原有JS代码为以下内容即可：

$('.js-question').on('click', function(e) {
  var $curQuestion = $(this),
    $curAnswer = $curQuestion.next(),
    activeClass = 'active',
    isActive = $curQuestion.hasClass(activeClass);
  
  // 重置所有手风琴状态：收起所有回答、移除所有标题激活态
  $('.js-question').removeClass(activeClass);
  $('.answer').slideUp();
  
  // 切换当前点击项的状态
  if (!isActive) {
    $curQuestion.addClass(activeClass);
    $curAnswer.slideDown();
  }
});

问题2：图标跟随展开/收起旋转的修复

上述JS修改已经将active类正确绑定到标题元素，原有CSS中.bracket-button.active .inner的旋转规则会自动生效，展开时图标旋转为0度，收起时回到默认的45度。
如果不需要保留鼠标悬停时的额外旋转效果，可以删除CSS中以下两段规则：

.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}

原有HTML代码无需修改，替换上述JS和CSS部分即可实现需求。

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