The PHP code generates a navigation menu of this structure -
<ul class="menu">
<li><a href="link">LINK 1</a></li>
<li><a href="link">LINK 2</a> <!-- click disabled -->
<ul class="sub-menu">
<li><a href="link">LINK 3</a></li>
<li><a href="link">LINK 4</a></li>
</ul>
</li>
<li><a href="link">LINK 5</a></li>
<li><a href="link">LINK 6</a> <!-- click disabled -->
<ul class="sub-menu">
<li><a href="link">LINK 7</a></li>
<li><a href="link">LINK 8</a></li>
<li><a href="link">LINK 9</a></li>
</ul>
</li>
<li><a href="link">LINK 10</a></li>
<li><a href="link">LINK 11</a></li>
</ul>
Instead of having to open sub-menu using hover, I want to make it open using click
The jQuery for click is:
$(document).ready(function(){
var li = $('.menu>li',this).has('.sub-menu');
$('>a',li).click(function(e){
e.preventDefault();
$('.sub-menu',li).toggle();
});
});
The only problem is that while clicking, all the ul with class .sub-menu gets opened. I only want the sub-menu of the currently clicked anchor tag to open. How do I do that?
Try this:
Working example https://jsfiddle.net/cjvwkvq9/
$("li > a")
.on("click", function (e) {
$(e.target).next().toggle();
});
Where $(e.target) is the clicked element.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments