在纯 JavaScript 中一次打开一个菜单的切换菜单答案

【问题标题】：toggle menu with one menu open at a time in pure javascript在纯 JavaScript 中一次打开一个菜单的切换菜单
【发布时间】：2020-05-27 14:45:26
【问题描述】：

我想进行菜单切换，并且一次打开菜单中的一项。我可以一次打开一项，但不能同时进行切换。

var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
    navclick[i].onclick = function () {
      if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
        this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active'); 
      }
      else {
        this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
      }
    }
  }

.-arrow-link-content {
  display:none;
}
.nav-active{ display:block;}

<ul class="c-icons" id="c-iconslist">
                    <li>
                        <div class="c-icons__text js-dropdown">heading 1</div>
                     <div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
                    </li>
                       <li>
                        <div class="c-icons__text js-dropdown">heading 2</div>
                     <div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
                    </li>
                </ul>

如果有人有任何建议..请分享..提前谢谢

【问题讨论】：

你能添加一个工作小提琴或添加 html 标记
一个简单的实现可能是click on non-open menu item -> find and close open menu item & open clicked menu item。无需遍历整个列表。
@SwimmerF 你能分享一些基本的例子吗..我对javascript很陌生
@user3342682 我不会从头开始做例子，如果你想要代码，给代码
@AkhilAravind 参考这个：jsfiddle.net/4hdpvbs6/2 切换正在工作，但一次打开一个菜单却没有。

标签： javascript html ecmascript-6 ecmascript-2016

【解决方案1】：

为了使切换工作，我们需要获取所有类名为-arrow-link-content的节点，然后先删除nav-active类，然后将nav-active添加到选定的项目。

检查sn-p。

var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
  navclick[i].onclick = function() {
    if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
      this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active');
      return false
    }


    var el = document.querySelectorAll('div.-arrow-link-content');
    for (var i = 0; i < el.length; i++) {
      if (el[i].classList.contains('nav-active')) el[i].classList.remove('nav-active');
    }
    this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');

  }
}

.-arrow-link-content {
  display: none;
}

.nav-active {
  display: block;
}

<ul class="c-icons" id="c-iconslist">
  <li>
    <div class="c-icons__text js-dropdown">heading 1</div>
    <div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
  </li>
  <li>
    <div class="c-icons__text js-dropdown">heading 2</div>
    <div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
  </li>
</ul>

【讨论】：

【解决方案2】：

由于一次最多可以打开一个元素，所以我们只需要查找那个元素，如果它存在就先关闭它，然后再打开一个未打开的元素

var navclick = document.getElementsByClassName("js-dropdown");
var navContent = document.getElementsByClassName('-arrow-link-content');
for (var i = 0; i < navclick.length; i++) {
    navclick[i].onclick = function () {
      if (this.parentNode.querySelector('div.-arrow-link-content').classList.contains('nav-active')) {
        this.parentNode.querySelector('div.-arrow-link-content').classList.remove('nav-active'); 
      }
      else {
        try {
          // if an open element exists, close it first
          this.parentNode.parentNode.querySelector('.nav-active').classList.remove('nav-active');
         }
          catch (error){ 
            // Error occurs when no open elment exists, in that case: Do nothing
          }
        this.parentNode.querySelector('div.-arrow-link-content').classList.add('nav-active');
      }
    }
  }

.-arrow-link-content {
  display:none;
}
.nav-active{ display:block;}

<ul class="c-icons" id="c-iconslist">
                    <li>
                        <div class="c-icons__text js-dropdown">heading 1</div>
                     <div class="c-icons__textdropdown -arrow-link-content"> Content 1</div>
                    </li>
                       <li>
                        <div class="c-icons__text js-dropdown">heading 2</div>
                     <div class="c-icons__textdropdown -arrow-link-content"> Content 2</div>
                    </li>
                </ul>

【讨论】：