Question

看看我的笔：https://codepen.io/QJan84/pen/NXVgop

我在这里遇到问题，我正在寻找一个可靠的解决方案。如果菜单项（仅限第一级）打开，则应事先关闭所有先前打开的菜单项。只有一个菜单项（仅限第一级）应该处于活动状态。

对于课程为ul的所有nm__lvl nm__lvl--expanded，nm__lvl--expanded必须与nm__lvL--collapsed进行交换。对？！还必须确保仅完成关闭转换，然后打开当前菜单项。关闭和打开应该一个接一个地发生。最后一个问题，我怎么能改进我的剧本？脚本的表现好吗？有什么可以改进的？我目前正在从jquery切换到ES6，这并不容易。

Answer 1

正如您在此fiddle中所看到的，我已经为您的代码添加了一项新功能，可以提供您正在寻找的功能。

//[...]
let nextNode = ele.nextElementSibling,
    prevNode = ele.previousElementSibling;

hideOtherSubMenus(prevNode);
prevNode.classList.toggle("nm__lvl__entry--active");
// [...]

function hideOtherSubMenus(elem) {
    var parentUl = elem.parentElement.parentElement;
  var activeSiblings = parentUl.querySelectorAll(".nm__lvl__entry.nm__lvl__entry--active");

  for (var i = 0; i < activeSiblings.length; i++) {
    var sibling = activeSiblings[i]; console.log(sibling);
    var btn = sibling.nextElementSibling;

    btn.click();
  }
}

它可能不是最好的解决方案，但我想出的最好的解决方案。

Mobile Nav：关闭所有打开的条目

1 个答案: