Multilevel List menu with pure javascript

Question

I am trying to create multilevel pure javascript menu with JS. BUt it only captures first element only.

(function() {
  
  document.querySelector('.more').addEventListener('click', function() {
    
    this.classList.toggle('open')
  }, false);
})();

li ul {display: none}
li.open ul {display: block}

<ul>
  <li>1</li>
  <li class="more">
    2
    <ul>
      <li>2,1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>2</li>
  <li>3</li>
  <li class="more">
    4
    <ul>
      <li>4.1</li>
      <li>4.2</li>
    </ul>
  </li>
  
</ul>

<ul>
  <li>1</li>
  <li class="more">
    2
    <ul>
      <li>2,1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>2</li>
  <li>3</li>
  <li class="more">
    4
    <ul>
      <li>4.1</li>
      <li>4.2</li>
    </ul>
  </li>
</ul>

When i tried to run query selector all it gives me an error saying querySelectorAll().addEventListener is not a function.

Can someone see what I am doing wrong here. Thanks.

You need to iterate throw each element and add them click listener — demkovych, Dec 19 '19 at 13:05

James Trickey · Answer 1 · 2019-12-19T13:12:13.713

1

Use querySelecrotAll in order to get array of elements and then loop through them individually to apply event listener.

https://www.w3schools.com/jsref/met_element_queryselectorall.asp

Adapted code:

   (function() {
      document.querySelectorAll('.more').forEach(element =>
        element.addEventListener('click', function() {

          this.classList.toggle('open')
        }, false)
      );
    })();

edited Dec 19 '19 at 13:12

answered Dec 19 '19 at 13:06

James Trickey

1,322
13
21

score 1 · Accepted Answer · answered Dec 19 '19 at 13:09

document.querySelectorAll returns an array of elements.

You just need to loop through them (ex: with Array.forEach) and add your event listener to each expandable element like this:

(function() {
  // get all elements with class 'more'
  let expandableElem = document.querySelectorAll('.more');
  
  // loop through each expandable element, adding click listener
  expandableElem.forEach(li => {
    li.addEventListener(
      'click',
      function() {
        this.classList.toggle('open')
      },
      false
    )
  });
})();

li ul {display: none}
li.open ul {display: block}

<ul>
  <li>1</li>
  <li class="more">
    2
    <ul>
      <li>2,1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>2</li>
  <li>3</li>
  <li class="more">
    4
    <ul>
      <li>4.1</li>
      <li>4.2</li>
    </ul>
  </li>
  
</ul>

bron · Answer 3 · 2019-12-19T14:10:30.760

The document.querySelectorAll is what you are looking for to select all .more elements. After that, use 'forEach' or a 'for' loop to add the EventListener on each .more element.

<ul class="nav">
  <li>1</li>
  <li class="more">2
    <ul>
      <li>2,1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>3</li>
  <li>4</li>
  <li class="more">5
    <ul>
      <li>5.1</li>
      <li>5.2</li>
    </ul>
  </li>
</ul>

<script>
(function() {
  var elm = document.querySelectorAll('.more');
  for (var i=0; i< elm.length; i++) {
    elm[i].addEventListener('click', function() {
      // optional 'remove' other elm's
      this.classList.toggle('open');
    }, false);
  }
})();
</script>

with some minimal css

.nav, .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav {
    position: relative;
    z-index: 597;
    float: left;
}
.nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    min-width: 150px;
}
.nav .open ul {
    display: block;
}
.nav li {
    position: relative;
    cursor: pointer;
    padding: 4px 10px;
}
.nav > li {
    float: left;
}
.nav ul li {
    float: none;
}

Multilevel List menu with pure javascript

3 Answers3