JavaScript实现仅点击父元素时触发折叠面板切换

问题描述 #

我有两层嵌套的折叠面板，点击子面板（如Test 1）时，父面板（BRAND）和子面板会同时关闭。当前为父元素（类名mobile-nav_accordion-contentbox）编写了如下JavaScript代码绑定点击事件，用于切换active类：

const mobile_navbar_accordion = document.getElementsByClassName("mobile-nav_accordion-contentbox");

for (let i = 0; i < mobile_navbar_accordion.length; i++) {
   let checkbox = mobile_navbar_accordion[i];
   checkbox.addEventListener("click", (e) => {
       e.currentTarget.classList.toggle("active");
   })
}

尝试过以下方案但均未解决问题：

• 在点击事件中添加e.stopPropagation();
• 将e.currentTarget替换为e.target，但点击始终被识别为子元素，测试代码返回"clicked on children"
• 用this替代e.currentTarget，控制台出现报错
• 给子元素添加CSS属性pointer-events: none;，导致链接失效且问题仍存在

完整代码示例 #

HTML #

<div class="mobile-nav_accordion">
  <div class="mobile-nav_accordion-contentbox">
    <label class="mobile-nav_accordion-contentbox-label">
      BRAND
    </label>
    <div class="mobile-nav_accordion-contentbox-content">
      <ul class="navigation-item-children--top-level">
        <li>
          <a class="mobile-nav__links" href="#">
            <span>
              Hello World 1 
            </span>
          </a>

          <!-- 子面板区域 -->
          <div class="mobile-nav_accordion__grandchildren">
            <div class="mobile-nav_accordion-contentbox__grandchildren">
              <label class="mobile-nav_accordion-contentbox-label__grandchildren">
                Test 1
              </label>
              <div class="mobile-nav_accordion-contentbox-content__grandchildren">
                <ul>
                  <li>
                    <a class="mobile-nav__links" href="#">
                      Hello world
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS #

ul{
  list-style: none;
}
a{
  color: black;
  text-decoration: none;
  padding: 10px 0;
}
.mobile-nav_accordion,
.mobile-nav_accordion__grandchildren{
  width: 600px;
}
.mobile-nav_accordion .mobile-nav_accordion-contentbox,
.mobile-nav_box {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
}
.mobile-nav_accordion-contentbox__grandchildren {
  position: relative;
  width: 100%;
}
.mobile-nav_accordion .mobile-nav_accordion-contentbox .mobile-nav_accordion-contentbox-label,
.mobile-nav_accordion__grandchildren .mobile-nav_accordion-contentbox__grandchildren .mobile-nav_accordion-contentbox-label__grandchildren{
  position: relative;
  width: 100%;
  padding: 20px 0;
}

/* 折叠标题后的+/-符号 */
.mobile-nav_accordion .mobile-nav_accordion-contentbox .mobile-nav_accordion-contentbox-label::before,
.mobile-nav_accordion__grandchildren .mobile-nav_accordion-contentbox__grandchildren .mobile-nav_accordion-contentbox-label__grandchildren::before
{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.mobile-nav_accordion .mobile-nav_accordion-contentbox.active .mobile-nav_accordion-contentbox-label::before,
.mobile-nav_accordion__grandchildren .mobile-nav_accordion-contentbox__grandchildren.active .mobile-nav_accordion-contentbox-label__grandchildren::before
{
  content: "-";
}
.mobile-nav_accordion .mobile-nav_accordion-contentbox .mobile-nav_accordion-contentbox-content,
.mobile-nav_accordion__grandchildren .mobile-nav_accordion-contentbox__grandchildren .mobile-nav_accordion-contentbox-content__grandchildren
{
  position: relative;
  height: 0;
  overflow: hidden;
  padding: 0 0.5rem;
  transition-property: all;
  transition-duration: 0.1s !important;
  transition-timing-function: linear;
}
.mobile-nav_accordion-contentbox-content__grandchildren{
  padding-left: 1rem;
}
.mobile-nav_accordion .mobile-nav_accordion-contentbox.active .mobile-nav_accordion-contentbox-content,
.mobile-nav_accordion__grandchildren .mobile-nav_accordion-contentbox__grandchildren.active .mobile-nav_accordion-contentbox-content__grandchildren{
  height: max-content;
  padding: 0.5rem;
}
.mobile-nav__links,
.mobile-nav_accordion-contentbox-label__grandchildren h5{
  font-size: 13px;
  margin-top: 1rem;
  color: #3c3c3c;
}

原JavaScript代码 #

const mobile_navbar_accordion = document.getElementsByClassName("mobile-nav_accordion-contentbox");
const mobile_navbar_accordion_grandchildren = document.getElementsByClassName("mobile-nav_accordion-contentbox__grandchildren");

for (let i = 0; i < mobile_navbar_accordion.length; i++) {
  let checkbox = mobile_navbar_accordion[i];
  checkbox.addEventListener("click", (e) => 
    e.currentTarget.classList.toggle("active")
  )
}
for (let i = 0; i < mobile_navbar_accordion_grandchildren.length; i++) {
  let checkbox = mobile_navbar_accordion_grandchildren[i];
  checkbox.addEventListener("click", (e) => 
    e.currentTarget.classList.toggle("active")
  )
}

解决方案 #

问题根源是事件冒泡：点击子面板区域时，事件会向上传递到父面板的点击事件处理函数，导致父面板的active类也被切换。

正确的解决方式：

1. 仅给折叠面板的标题（label元素）绑定点击事件，而非整个面板容器，避免误触发
2. 给子面板的点击事件添加e.stopPropagation()，阻止事件向上冒泡到父元素

修改后的JavaScript代码：

// 父面板逻辑：仅绑定标题点击事件
const mobile_navbar_accordion = document.getElementsByClassName("mobile-nav_accordion-contentbox");
for (let i = 0; i < mobile_navbar_accordion.length; i++) {
  const panel = mobile_navbar_accordion[i];
  const label = panel.querySelector(".mobile-nav_accordion-contentbox-label");
  label.addEventListener("click", () => {
    panel.classList.toggle("active");
  });
}

// 子面板逻辑：绑定标题点击+阻止冒泡
const mobile_navbar_accordion_grandchildren = document.getElementsByClassName("mobile-nav_accordion-contentbox__grandchildren");
for (let i = 0; i < mobile_navbar_accordion_grandchildren.length; i++) {
  const childPanel = mobile_navbar_accordion_grandchildren[i];
  const childLabel = childPanel.querySelector(".mobile-nav_accordion-contentbox-label__grandchildren");
  childLabel.addEventListener("click", (e) => {
    e.stopPropagation();
    childPanel.classList.toggle("active");
  });
}

原方案无效原因说明 #

• 直接给面板容器绑定事件：点击容器内任意区域（包括子面板）都会触发父面板事件，即使加stopPropagation也无法完全避免误触发
• 用e.target代替currentTarget：target是实际点击的子元素，导致切换逻辑混乱
• pointer-events: none：会让所有子元素失去交互性（包括链接），不可行
• 箭头函数中用this报错：箭头函数没有独立的this，继承自外层作用域，无法指向绑定事件的元素

修改后，只有点击折叠标题时才会触发展开/收起，点击子面板标题只会切换子面板状态，且事件不会冒泡到父面板，彻底解决同步关闭问题。

内容的提问来源于stack exchange，提问作者Hiba abdel karim