Toggle class of parent element onclick without jQuery

Question

I'm trying to toggle the class of a parent li element when the sub ul element is active. I know how to do it in jQuery, but the goal with this project is to not rely on libraries like Bootstrap or jQuery.

I have a demo on CodePen: https://codepen.io/mikejandreau/pen/eRvOBQ

There's also a dev site using the same menu here: http://losaidos.com/dev/baseinstall/.

This is the JavaScript currently controlling the sub-menu toggles:

// Add toggles to menu items that have submenus and bind to click event
var subMenuItems = document.body.querySelectorAll('.page_item_has_children > a');
var index = 0;
for (index = 0; index < subMenuItems.length; index++) {
  var dropdownArrow = document.createElement('span');
  dropdownArrow.className = 'sub-nav-toggle';
  dropdownArrow.innerHTML = 'More';
  subMenuItems[index].parentNode.insertBefore(dropdownArrow, subMenuItems[index].nextSibling);
}

// Enables toggling all submenus individually
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle');    
for(var i in subMenuToggle) {
  if(subMenuToggle.hasOwnProperty(i)) {
    subMenuToggle[i].onclick = function() {
      this.parentElement.querySelector('.children').classList.toggle("active");
      this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active");
    };
  }
}

I tried duplicating the logic by adding this to the subMenuToggle[i].onclick function:

this.parentElement.querySelector('.page_item_has_children a').classList.toggle("active");

But no luck so far in getting it working. I get the feeling I'm close but missing something obvious.

Any pointers would be greatly appreciated - thanks in advance!

Don't use for...in over a node list. Use for(var i = 0; i < subMenuToggle.length; i++), or if your browser supports it, subMenuToggle.forEach — Phil
– Phil, Commented Jun 19, 2017 at 1:08
I updated my CodePen demo with your suggestion, and it doesn't seem to do the trick. I might be doing it wrong - here's the updated demo: codepen.io/mikejandreau/pen/eRvOBQ?editors=0010. — Mike Jandreau
– Mike Jandreau, Commented Jun 19, 2017 at 1:24

Mike Jandreau · Accepted Answer · 2017-06-20 19:22:25Z

4

The answer was staring me in the face.

There was no need to do use .querySelector('.class-of-parent) because the target elements are already within the parent. I added this.parentElement.classList.toggle("active"); and it worked like a charm.

// Enables toggling all submenus individually
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle'); 
for(var i in subMenuToggle) {
  if(subMenuToggle.hasOwnProperty(i)) {
    subMenuToggle[i].onclick = function() {
      this.parentElement.querySelector('.children').classList.toggle("active");
      this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active");
      this.parentElement.classList.toggle("active"); // facepalm of obviousness
    };
  }
}

answered Jun 20, 2017 at 19:22

Mike Jandreau

4424 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle class of parent element onclick without jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related