I have my HTML code here :
<ul class="main-block">
<li class="firstLevel">
<a href="#category">EXAMPLE CATEGORY 1</a>
<ul class="dijete">
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 11.</a>
</li>
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 1.1</a>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#category">EXAMPLE CATEGORY 2</a>
<ul class="dijete">
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.1</a>
</li>
<li class="child">
<a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.2</a>
</li>
</ul>
</li>
</ul>
My jQuery code for toggle()
is here:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function() {
$j('li.firstLevel').click(function(){
if($j('ul.dijete').hasClass('active')){
$j(this).find('ul.dijete').removeClass('active');
}else{
$j(this).find('ul.dijete').addClass('active');
}
});
});
</script>
But when I am on one category EXAMPLE 1 (active or clicked already) and chose to click on another EXAMPLE 2 - the first one does not close, so as the other second that I clicked doesn not open.
Why is that hide-show doesn't work?
Why I can not show second sub-menu
and hide first one while I am currently on first (not working in both ways)?
Use this:
var $j = jQuery.noConflict();
$j(function() {
$j('li.firstLevel').click(function(){
$j(this).children('ul.dijete').toggleClass('active');
});
});
You could use toggleClass()
function instead and before adding active
class to the clicked item you should remove it from other items with class dijete
using :
$('ul.dijete').removeClass('active');
Hope this helps.
$('li.firstLevel').click(function(e){ e.preventDefault(); $('ul.dijete').removeClass('active'); $(this).find('ul.dijete').toggleClass('active'); });
.active{ background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 11.</a> </li> <li class="child"> <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 1.1</a> </li> </ul> </li> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 2</a> <ul class="dijete"> <li class="child"> <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.1</a> </li> <li class="child"> <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.2</a> </li> </ul> </li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.