Toggle class only if nested submenu exists

Question

    <li class="treeview">
              <a href="#">
              </a>
    //nested submenu
              <ul class="treeview-menu">
                <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
           </ul>
</li>

    <li class="treeview">
 //doesnt have submenu
              <a href="#">
              </a>
     </li>

What I have implemented adds the menu-open class regardless. So I am looking for a way to add the class only if treeview-menu exists

var treeview = document.querySelectorAll(".treeview");
for (var i=0; i<treeview.length; i++) {
    treeview[i].addEventListener("click", function(e) {
    this.classList.toggle("menu-open");
    console.log(this);
});

score 0 · Answer 1 · answered Apr 13 '19 at 08:26

The script below gets the clicked li.treeview element's children, transforms the received HTMLCollection object to an array and filters it to check whether one of them has a .treeview-menu class.

<ul>
  <li class="treeview">
      <a href="#">test1</a>
    <!-- //nested submenu -->
    <ul class="treeview-menu">
      <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
    </ul>
  </li>

  <li class="treeview">
  <!-- //doesnt have submenu -->
      <a href="#">test2</a>
  </li>
</ul>

<script>

var treeview = document.querySelectorAll(".treeview");
for (var i=0; i<treeview.length; i++) {
  treeview[i].addEventListener("click", function(e) {
    let childrenArray = [].slice.call(this.children),
        filteredChildrenArray = childrenArray.filter(function(element) {
          return element.className == "treeview-menu";
        });
    if (filteredChildrenArray.length > 0) {
      this.classList.toggle("menu-open");
      console.log("class changed.");
    }
  });
}

</script>

score 0 · Answer 2 · answered Apr 13 '19 at 08:26

If I understand your need correctly, you need to check whether it has a .treeview-menu within it. So you can use querySelector on each of the .treeview elements for that.

var treeview = document.querySelectorAll(".treeview");
for (var i=0; i<treeview.length; i++) {
    const treeViewElement = treeview[i];
    if (treeViewElement.querySelector('.treeview-menu')) { // Checking for treeview-menu descendants
        treeviewElement.addEventListener("click", function(e) {
        this.classList.toggle("menu-open");
        console.log(this);
    }
});

(The same can be done with a delegate and save some listeners.)

score 0 · Answer 3 · answered Apr 13 '19 at 09:28

You should check for only those elements which are direct children of treeview class and have a treeview-menu class. I'm assuming you want to toggle class only on clicking the treeview class element and not on treeview-menu class element.

var treeview = document.querySelectorAll(".treeview > .treeview-menu");
console.log(treeview);
for (var i=0; i<treeview.length; i++) {
    treeview[i].parentNode.addEventListener("click", function(e) {
    this.classList.toggle("menu-open");
    console.log(this);
});
treeview[i].addEventListener("click", function(e) {
    e.stopPropagation();
    console.log(this);
});
}

<li class="treeview">
              <a href="#">
              </a>
    //nested submenu
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
           </ul>
</li>

    <li class="treeview">
 //doesnt have submenu
              <a href="#">
              </a>
     </li>

Toggle class only if nested submenu exists

3 Answers3