如何使用列表项创建动态菜单？

Question

我正在尝试使用彼此嵌套以显示子菜单的列表项和无序列表来创建菜单。 单击每个列表项时，它将通过添加“显示”类来显示子无序列表。 一旦单击“ topLevel”列表项组件之一（这些是三个主菜单选项），我似乎无法弄清楚如何删除“ show”类。 这是jsFiddle： https ://jsfiddle.net/eu1rc4ma/2/

提前致谢！

尝试使用跨度从所有子组件中删除该类。

<div class="container">
      <div class="menu">
        <ul class="show">
          <li>
            <span class="topLevel">Services</span>
            <ul>
              <li>
                1
                <ul>
                  <li>1.1</li>
                  <li>1.2</li>
                  <li>1.3</li>
                </ul>
              </li>
              <li>
                2
                <ul>
                  <li>2.1</li>
                  <li>2.2</li>
                  <li>2.3</li>
                </ul>
              </li>
              <li>
                3
                <ul>
                  <li>3.1</li>
                  <li>3.2</li>
                  <li>3.3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <span class="topLevel">Technology</span>
            <ul>
              <li>
                1
                <ul>
                  <li>1.1</li>
                  <li>1.2</li>
                  <li>1.3</li>
                </ul>
              </li>
              <li>
                2
                <ul>
                  <li>2.1</li>
                  <li>2.2</li>
                  <li>2.3</li>
                </ul>
              </li>
              <li>
                3
                <ul>
                  <li>3.1</li>
                  <li>3.2</li>
                  <li>3.3</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <span class="topLevel">About</span>
            <ul>
              <li>
                1
                <ul>
                  <li>1.1</li>
                  <li>1.2</li>
                  <li>1.3</li>
                </ul>
              </li>
              <li>
                2
                <ul>
                  <li>2.1</li>
                  <li>2.2</li>
                  <li>2.3</li>
                </ul>
              </li>
              <li>
                3
                <ul>
                  <li>3.1</li>
                  <li>3.2</li>
                  <li>3.3</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    ul {
      display: none;
    }

    .show {
      display: flex;
      flex-direction: column;
    }

    let targets = document.querySelectorAll("li");
    targets.forEach(function(target) {
      target.addEventListener("click", function() {
        let subMenu = target.querySelector("ul");
        subMenu.classList.add("show");
      });
    });

Answer 1

通过检查ul是否具有.show尝试此.show

 let targets = document.querySelectorAll("li"); let main, sub; targets.forEach(function(target) { if (target.parentElement.parentElement.tagName == "DIV") { // for mains target.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); let subMenu = target.querySelector("ul"); toggleClass(subMenu); if (main && main != subMenu) { main.classList.remove("show") } main = subMenu; }); } else if (target.parentElement.parentElement.parentElement.parentElement.tagName == "DIV") { target.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); let subMenu = target.querySelector("ul"); toggleClass(subMenu); if (sub && sub != subMenu) { sub.classList.remove("show") } sub = subMenu; }); } else { target.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); }); } }); function toggleClass(subMenu) { if (subMenu.className.includes('show')) { subMenu.classList.remove("show") } else { subMenu.classList.add("show"); } } 

 ul { display: none; } .show { display: flex; flex-direction: column; } 

 <div class="container"> <div class="menu"> <ul class="show"> <li> <span class="topLevel">Services</span> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> <li>1.3</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ul> </li> <li> 3 <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li> </ul> </li> <li> <span class="topLevel">Technology</span> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> <li>1.3</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ul> </li> <li> 3 <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li> </ul> </li> <li> <span class="topLevel">About</span> <ul> <li> 1 <ul> <li>1.1</li> <li>1.2</li> <li>1.3</li> </ul> </li> <li> 2 <ul> <li>2.1</li> <li>2.2</li> <li>2.3</li> </ul> </li> <li> 3 <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li> </ul> </li> </ul> </div> </div> 

Answer 2

尝试以下代码以切换您的列表：

let targets = document.querySelectorAll("li");
targets.forEach(function(target) {
  target.addEventListener("click", function() {
    let subMenu = target.querySelector("ul");
    let isOpen = subMenu.classList.contains('show');
    if (!isOpen) {
      subMenu.classList.add("show");
    } else {
      subMenu.classList.remove("show");
    }
  });
});

工作jsfiddle https://jsfiddle.net/vfxtcbpd/2/