Unable to select and change class of UL submenu item

Question

I am in the process of update some jQuery code to be in plain JS. Currently the code is using jQuery closest method to select the closest UL. I need help in finding the right approach to selecting the closest UL using javascript.

Here is a sample of the HTML code:

<ul class ="m_nav_tier m_nav_tier1">
    <li data-nav-tier="1">
        <a class="m_drop" href="#">Link1</a>
        <ul class="m_nav_tier m_nav_tier2">
             <li>One</li>
             <li>Two</li>
             <li>Three</li>
        </ul>
    </li>
</ul>

What I am trying to do is change the class of <ul class="m_nav_tier m_nav_tier2"> when user clicks on Link 1

Here is what I have tried so far:

var mdrop = document.getElementsByClassName('m_drop');

for (i = 9; i < mdrop.length; i++) {
  //Forward
  mdrop[i].onclick = function () {

  //make tier 1 inactive
  var tier1 = document.getElementsByClassName('m_nav_tier1')[1];
  tier1.className += " inactive";

  //find closest UL and make it active
  document.querySelector('ul .m_nav_tier2')[9].className += " active";
};

Sample Fiddle *UPDATE: I was able to change the class with the following code:

document.getElementsByClassName('m_nav_tier2')[9].className += " active";

But the problem is I have to set the array a value. I tried placing [i] but that didn't work. How can I up update the class depending on which LI was selected?

Check this, this could help your problem http://stackoverflow.com/questions/15329167/closest-ancestor-matching-selector-using-native-dom — Robin Carlo Catacutan, May 04 '15 at 17:33
What's the `mdrop` -variable? The fiddle you provided crashes right at the beginning since it's not defined. — Waiski, May 04 '15 at 17:38

score 0 · Answer 1 · answered May 04 '15 at 17:35

from what i am aware your class its base on to the .css and you can do a copy and change from 1 to 2 and what function it has and i dont wright .js but i cant see you telling JavaScript where to colect this function ('m_nav_tier1') to be able to convert to this document.querySelector('ul .m_nav_tier2')[9].className += " active";

Unable to select and change class of UL submenu item

1 Answers1