点击.togglebox父元素切换.togglebox-body子元素功能失效求助

核心问题 #

1. HTML结构缺失类名：第一个可折叠区块（链接管理）的内容容器未添加togglebox-body类，导致JS无法定位目标元素。
2. JS选择器错误：.togglebox-body是.togglebox的兄弟元素，而非子元素，使用children()方法无法找到目标，需改用兄弟选择器。

修正步骤 #

1. 修复HTML结构

给第一个区块的内容容器添加togglebox-body类：

<section id="link-manager" class="box flex column margin-bottom-4">
  <div class="togglebox flex justify-content-space-between padding-3">
    <p>Gerenciamento de Links</p>
  </div>
  <!-- 添加togglebox-body类 -->
  <div class="togglebox-body">
    <hr class="margin-0">
    <div id="link-manager-editor" class="flex column gap-3 padding-3">
      <a href="#" class="link text-align-center box scale-up">Tutoriais de WordPress 👨‍💻</a>
      <a href="#" class="link text-align-center box scale-up">O Meu Encurtador De Link (Decreaser) 🔗</a>
      <a href="#" class="link text-align-center box scale-up">Projeto De Hospedagem De Arquivos Open Source 🎯</a>
      <a href="#" class="link text-align-center box scale-up">sarain.ag (Site Que Fiz No WordPress) 💻</a>
      <a href="#" class="link text-align-center box scale-up">espacoviverpsicologia.com (Site Que Fiz No WordPress)💻</a>
    </div>
  </div>
</section>

2. 修正JS选择器

将children()替换为next()，获取.togglebox的下一个兄弟元素：

$("main").on('click', '.togglebox', function() {
  const thisBox = $(this).next(".togglebox-body")
  thisBox.toggle()
})

可选优化（提升用户体验） #

添加箭头翻转效果，让用户直观感知折叠状态：

CSS新增样式

.togglebox.active::after {
  content: "\25B2"; /* 向上箭头 */
}

JS新增类切换逻辑

$("main").on('click', '.togglebox', function() {
  const thisBox = $(this).next(".togglebox-body")
  thisBox.toggle()
  $(this).toggleClass("active") // 切换箭头方向
})

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