Realised an earlier question I asked wasn't really the most clear way of asking it so I am trying to simplify it and add some more details as I think I know what I need to do just don't know how to do it.
I have a multi-level menu - HTML
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-1 menu-all-pages-container">
<ul id="primary-menu" class="nav-menu" aria-expanded="false">
<li id="1636" class="menu-item">
<a href="http://wpthemetestdata.wordpress.com/">Home</a></li>
<li id="1637" class="menu-item">
<a href="http://localhost/frytest/blog/">Blog</a></li>
<li id="1638" class="menu-item">
<a href="http://localhost/frytest/front-page/">Front Page</a></li>
<li id="1639" class="menu-item" aria-haspopup="true">
<a href="http://localhost/frytest/about/">About The Tests</a>
<button class="dropdown-toggle" aria-expanded="true">
<span class="screen-reader-text">expand child menu</span>
</button>
<ul class="sub-menu">
<li id="1697" class="menu-item">
<a href="http://localhost/frytest/about/page-image-alignment/">Page Image Alignment</a></li>
<li id="1698" class="menu-item">
<a href="http://localhost/frytest/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
<li id="1640" class="menu-item">
<a href="http://localhost/frytest/about/clearing-floats/">Clearing Floats</a></li>
<li id="1641" class="menu-item">
<a href="http://localhost/frytest/about/page-with-comments/">Page with comments</a></li>
<li id="1642" class="menu-item">
<a href="http://localhost/frytest/about/page-with-comments-disabled/">Page with comments disabled</a></li>
</ul>
</li>
<li id="1643" class="menu-item" aria-haspopup="true">
<a href="http://localhost/frytest/level-1/">Level 1</a>
<button class="dropdown-toggle" aria-expanded="true">
<span class="screen-reader-text">expand child menu</span>
</button>
<ul class="sub-menu">
<li id="1644" class="menu-item" aria-haspopup="true">
<a href="http://localhost/frytest/level-1/level-2/">Level 2</a>
<button class="dropdown-toggle" aria-expanded="true">
<span class="screen-reader-text">expand child menu</span>
</button>
<ul class="sub-menu">
<li id="1645" class="menu-item">
<a href="http://localhost/frytest/level-1/level-2/level-3/">Level 3</a></li>
<li id="1699" class="menu-item">
<a href="http://localhost/frytest/level-1/level-2/level-3a/">Level 3a</a></li>
<li id="1700" class="menu-item">
<a href="http://localhost/frytest/level-1/level-2/level-3b/">Level 3b</a></li>
</ul>
</li>
<li id="1701" class="menu-item">
<a href="http://localhost/frytest/level-1/level-2a/">Level 2a</a></li>
<li id="1702" class="menu-item">
<a href="http://localhost/frytest/level-1/level-2b/">Level 2b</a></li>
</ul>
</li>
<li id="1646" class="menu-item">
<a href="http://localhost/frytest/lorem-ipsum/">Lorem Ipsum</a></li>
<li id="1703" class="menu-item">
<a href="http://localhost/frytest/page-a/">Page A</a></li>
<li id="1704" class="menu-item">
<a href="http://localhost/frytest/page-b/">Page B</a></li>
</ul>
</div>
</nav>
Each element that has a sub menu attached has a button that acts as a toggle that opens and closes the attached element. I have been trying to program the functionality of the menu and have got to a sticking point. When a dropdown toggle is clicked this javascript is run:
container.find( '.dropdown-toggle' ).click(
function( e ){
var _this = $( this );
e.preventDefault();
$('.dropdown-toggle.toggle-on').toggleClass('toggle-on');
$('.sub-menu.toggled-on').toggleClass('toggled-on');
_this.parents('.sub-menu').toggleClass('toggled-on');
//This is the line that doesnt run
_this.parents('.dropdown-toggle').toggleClass('toggle-on');
//toggles the chevron clicked to go on
_this.toggleClass( 'toggle-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
//Below has no effect of expansion
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
}
);
The line that isn't working is the
_this.parents(".dropdown-toggle").toggleClass("toggle-on")
The line above it does work but this one doesn't. I assume it's because that while the button is hierarchically above the button that is clicked it doesn't count as a parent as it is on the same level as the <ul> tag which does get selected on the above line.
How would I go about toggling the class for all the buttons directly above the one clicked?
One way could be to go up 2 times and then go down 1 time with a button selector.
I suppose it could look like this:
_this.parent().parent().children('button')