Hello to all, welcome to therichpost.com. In this post, I will tell you, Jquery Show Hide Nested Ul Li. I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code.
You can do this code for n-th ul li child also but you have to follow my code:
Here is the working code for Jquery Show Hide Nested Ul Li:
<ul class=”nav-menu”>
<li>
li1
<ul class=”child” style=”display: none;”>
<li>
li2 Child li1
<ul class=”child” style=”display: none;”>
<li>
li3 Child li2
<ul class=”child” style=”display: none;”>
<li>li4 Child li3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
var a=0;
var b=0;
$(“.nav-menu li”).each(function() {
a++;
var liclass = $(this).addClass(‘li’+a);});
$(“.nav-menu li ul”).each(function() {
b++;
$(this).addClass(‘li’+b);
});
$(“.nav-menu li”).click(function(event) {
var classname = $(this).attr(“class”);
$(“ul.”+classname).show();
});
});
</script>
There are so many jquery code, tricks and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com
Recent Comments