Javascript 目标仅被点击的元素

Question

所以我有一个侧面导航，在某些列表中有一个子菜单，并且我尝试仅在单击时显示子菜单。

这是 HTML

<div class="sidebar">
    <ul class="nav">
        <li class="main-menu" onclick="dispDrop()"><a href="">Item 1</a>
            <ul class="sub-menu">
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li class="main-menu" onclick="dispDrop()"><a href="">Item 4</a>
            <ul class="sub-menu">
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="">Item 5</a></li>
        <li><a href="">Item 6</a></li>
    </ul>
</div>

这是它的 CSS

.nav ul {
    display: none;
    position: relative;
    padding: 0px;
}
.nav li.active ul {
    display: block;
}

这是 JavaScript

<script type="text/javascript">
    const navItem = document.querySelector('.main-menu');

    function dispDrop() {
        navItem.classList.toggle("active");
    }
</script>

起初它工作正常，但是当我将子菜单添加到另一个列表时，它开始出现故障并且不会显示子菜单。

有没有办法只定位点击的<li>并且仅将类添加/切换到单击的 <li> ？

Answer 1

您可以做的是将this添加到onclick="dispDrop()"

然后执行以下操作。

function dispDrop(obj) {
  obj.classList.toggle("active");
}

演示

function dispDrop(obj) {
  obj.classList.toggle("active");
}

.nav ul {
  display: none;
  position: relative;
  padding: 0px;
}

.nav li.active ul {
  display: block;
}

<div class="sidebar">
  <ul class="nav">
    <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 1</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
      </ul>
    </li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 4</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
      </ul>
    </li>
    <li><a href="">Item 5</a></li>
    <li><a href="">Item 6</a></li>
  </ul>
</div>