如何实现点击标题与图标均可触发Accordion手风琴组件展开？

问题现状 #

当前手风琴仅点击图标能触发展开/收起，需要实现点击标题文本区域、图标都能控制手风琴状态。

修改思路 #

1. 统一事件绑定：直接给整个.title容器绑定点击事件，标题文本、图标都在这个容器内，点击任意区域都会触发事件，无需分别绑定。
2. 同步状态：点击标题区域时，同步手风琴展开/收起状态与标题复选框的选中状态，保证视觉一致性。

修改后的完整代码 #

JavaScript #

function toggleAccordion(titleEl) {
  const content = titleEl.nextElementSibling;
  const arrow = titleEl.querySelector('.arrow');
  const checkbox = titleEl.querySelector('.title-checkbox');

  if (content.classList.contains('hidden')) {
    // 展开内容
    content.classList.remove('hidden');
    content.classList.add('visible');
    // 更新箭头图标
    arrow.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>';
    // 同步复选框选中状态
    checkbox.checked = true;
  } else {
    // 收起内容
    content.classList.remove('visible');
    content.classList.add('hidden');
    // 更新箭头图标
    arrow.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/> </svg>';
    // 同步复选框未选中状态
    checkbox.checked = false;
  }
}

// 给所有.title容器绑定点击事件
document.querySelectorAll('.title').forEach(title => {
  title.addEventListener('click', function(e) {
    // 阻止复选框默认勾选行为，避免状态冲突
    if (e.target.classList.contains('title-checkbox')) {
      e.preventDefault();
    }
    toggleAccordion(this);
  });
});

CSS #

.arrow {
  font-size: 18px;
}

.hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.visible {
  max-height: 1200px;
  overflow: hidden;
  transition: max-height 0.5s ease-in;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #055274;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #055274;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  font-family: Manrope, sans-serif;
  color: #055274;
  gap: 8px;
  cursor: pointer;
  margin: 2px;
}

label span {
  margin-left: 8px;
  vertical-align: middle;
}

.checkboxer {
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #055274;
}

.title-label {
  cursor: pointer;
}

.title-checkbox {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  font-family: Manrope, sans-serif;
  color: #055274;
  gap: 8px;
}

.containerr {
  margin-bottom: 8px;
}

/* 优化标题容器布局，提示可点击 */
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

HTML #

<div class="containerr">
  <div class="title">
    <label class="title-label"><input type="checkbox" class="title-checkbox" name="plastic_surgery" value="Liposuction"> Weight Loss Treatments</label>
    <span class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
      </svg>
    </span>
  </div>
  <div class="hidden">
    <label><input type="checkbox" class="checkboxer" name="plastic_surgery" value="Liposuction"><a href="/gastric-sleeve/" target="_blank"> Gastric Sleeve</a></label><br>
    <label><input type="checkbox" class="checkboxer" name="plastic_surgery"><a href="/gastric-balloon/" target="_blank"> Gastric Balloon</a></label><br>
    <label><input type="checkbox" class="checkboxer" name="plastic_surgery"><a href="/stomach-gastric-botox/" target="_blank"> Stomach Gastric Botox</a></label><br>
  </div>
</div>

修改说明 #

• 移除了HTML中.title的onclick属性，改用JS统一绑定事件，便于维护。
• 给.title容器添加flex布局和指针光标，优化交互体验。
• 在切换函数中同步复选框状态，避免手风琴与复选框状态不一致。
• 阻止复选框默认点击行为，防止触发原生勾选逻辑干扰手风琴状态。

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