如何使用jQuery实现手风琴效果并默认展开第一个面板？

核心修改点 #

• 修复CSS中内容区块激活状态未控制显示的问题
• 实现页面加载时第一个问答默认展开
• 优化交互逻辑，点击某一问答时自动关闭其他所有问答

完整HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="content_list" style="display:block;">
  <li class="list_item">
    <div class="sub_title_wrapper">
      <h4 class="sub_title"><span class="symbol">•</span>Title</h4>
      <button class="open">V</button>
    </div>
    <ul class="sub_content">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li class="list_item">
    <div class="sub_title_wrapper">
      <h4 class="sub_title"><span class="symbol">•</span>Title</h4>
      <button class="open">V</button>
    </div>
    <ul class="sub_content">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li class="list_item">
    <div class="sub_title_wrapper">
      <h4 class="sub_title"><span class="symbol">•</span>Title</h4>
      <button class="open">V</button>
    </div>
    <ul class="sub_content">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li class="list_item">
    <div class="sub_title_wrapper">
      <h4 class="sub_title"><span class="symbol">•</span>Title</h4>
      <button class="open">V</button>
    </div>
    <ul class="sub_content">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
  <li class="list_item">
    <div class="sub_title_wrapper">
      <h4 class="sub_title"><span class="symbol">•</span>Title</h4>
      <button class="open">V</button>
    </div>
    <ul class="sub_content">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nemo voluptates provident accusamus hic, sapiente, omnis quidem placeat asperiores dolorem esse iusto eius, dignissimos quam repellat ad. Eveniet, rem sapiente!
      </li>
    </ul>
  </li>
</ul>

调整后的CSS代码 #

.content_list .list_item {
  border-bottom: 1px solid #222;
}

.content_list .list_item .sub_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
  cursor: pointer;
}

.content_list .list_item .sub_title_wrapper .open {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.5s;
  transform: rotate(180deg);
  border: none;
  background: none;
  cursor: pointer;
}

.content_list .list_item .sub_title_wrapper .open.active {
  transform: rotate(0deg);
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title {
  cursor: pointer;
  font-size: 15px;
  color: #222;
}

.content_list .list_item .sub_title_wrapper .sub_title .symbol {
  display: none;
}

.content_list .list_item .sub_title_wrapper .sub_title.active {
  color: #000;
}

.content_list .list_item .sub_content {
  display: none;
  padding: 20px 16px;
}

.content_list .list_item .sub_content h4 {
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 8px;
}

.content_list .list_item .sub_content li {
  font-size: 15px;
  line-height: 1.5;
}

.content_list .list_item .sub_content.active {
  display: block; /* 新增：激活时显示内容 */
  color: #222;
}

优化后的JavaScript代码 #

// 页面加载完成后初始化第一个问答为展开状态
$(document).ready(function() {
  const firstItem = $(".list_item:first");
  firstItem.find(".open").addClass("active");
  firstItem.find(".sub_content").addClass("active").show();
  
  $(".sub_title_wrapper").on("click", function() {
    const currentParent = $(this).parent(".list_item");
    const currentContent = currentParent.find(".sub_content");
    const currentOpenBtn = currentParent.find(".open");
    const isCurrentActive = currentContent.hasClass("active");
    
    // 关闭所有兄弟项的内容及按钮状态
    currentParent.siblings().find(".sub_content").removeClass("active").slideUp();
    currentParent.siblings().find(".open").removeClass("active");
    
    // 处理当前项的展开/关闭逻辑
    if (isCurrentActive) {
      currentContent.removeClass("active").slideUp();
      currentOpenBtn.removeClass("active");
    } else {
      currentContent.addClass("active").slideDown();
      currentOpenBtn.addClass("active");
    }
  });
});

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