Javascript target only clicked element

Issue

So I have a side navigation that has a sub-menu in some of the list, and I'm trying to display the sub-menu only when it's clicked.

Here is the 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>

Here is its CSS

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

Here is the javascript

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

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

At first it was working fine, but when I added a submenu to another list, it started glitching and won't display the submenu.

Is there a way to target only the clicked <li> and only add/toggle the class to that clicked <li>?

Solution

What you can do is adding this to onclick="dispDrop()"

And then do the following.

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

Demo

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>

Answered By - Carsten Løvbo Andersen