手风琴：对父子应用相同的类

编程问答 2022-04-24

问题描述

我目前有一个可用于导航的手风琴，对此我很满意。 我有它，所以当单击父级时，它会将一个类（处于活动状态）应用于下一个兄弟姐妹，即“.submenu”。我正在努力弄清楚如何将相同的类也应用于父级，以及父级的“a”链接（在 html 中它是“a.accordion-item”）。

基本上，我的 CSS 中规定，当“is-active”也应用于“accordion-item”时，它会将“+”旋转为“x”。

感谢您的帮助，谢谢！ 我也在（尝试）自学 JS/Jquery，所以请随意详细说明！

CodePen 上的完整代码。

JS 代码：

let accordionIsActive = "is-active";
let accordionParent = document.querySelectorAll(".accordion-item");
for (let i = 0; i < accordionParent.length; i++) {
  accordionParent[i].addEventListener("click",toggleAccordionUL,false);
}

function toggleAccordionUL(e) {
  // Prevent default link function on parent.
  e.preventDefault();
 
  let accordionGroup = document.querySelector("." + accordionIsActive);
  let sameElem = false;
  
  if (accordionGroup) {
    closeAccordion(accordionGroup);
    sameElem = accordionGroup.prevIoUsElementSibling === e.target;
  }

  if (!sameElem) {
    let accordionUL = e.target.nextElementSibling;
    openAccordion(accordionUL);
  }
}

function closeAccordion(accordionGroup) {
  accordionGroup.classList.remove(accordionIsActive);
  accordionGroup.style.maxHeight = 0;
}

function openAccordion(accordionUL) {
  accordionUL.classList.add(accordionIsActive);
  accordionUL.style.maxHeight = accordionUL.scrollHeight + "px";
}

let defaultPanel = document.querySelector(".submenu");
if (defaultPanel) {
  defaultPanel.classList.remove(accordionIsActive);
  /* setTimeout(openAccordion,1000,defaultPanel); */
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accordionforeachforeachfunctionfunctionfunctionjavascriptjquery