Here my html :
<ul id="navLeft">
<li>
<a >aaaa</a>
<ul >
<li><a>1111</a></li>
<li><a>1111</a></li>
<li><a>1111</a></li>
</ul>
</li>
<li>
<a >bbbb</a>
<ul >
<li><a>2222</a></li>
<li><a>2222</a></li>
<li><a>2222</a></li>
</ul>
</li>
<li>
<a >cccc</a>
<ul >
<li><a>3333</a></li>
<li><a>3333</a></li>
<li><a>3333</a></li>
</ul>
</li>
</ul>
</body>
CSS:
.children{
display: none;
}
jquery:
$(".nav_a").click(function () {
$('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
$(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});
CodePudding user response:
#navLeft li:first-child .children{
display:block;
}
I hope this css is what you are looking for. If this is not working Please give a detailed description.
CodePudding user response:
Can you please Check the below script instead of your script and tell me this is what you are looking for.
$('#navLeft li>a').click(function(){
$('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
$(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});
If this is what you are trying to acheive then don't forget to mark it as a correct answer.