My jQuery code works, but I want to close the child ul
only if I click on it (the child ul
); right now it is closing when I click the parent li
as well. How can I fix this behavior?
$(document).ready(function(){
$("ul>li").click(function(){
var lk=$(this).text();
var w=$("ul li:contains('"+lk+"')").width();
$("ul li").removeClass("h");
$("ul li:contains('"+lk+"')").addClass("h");
if(w>200){var a=1;$("ul li").removeClass("h");}else{var a=0;}
if(a==1){
$("ul li:contains('"+lk+"') ul").hide(function(){
$("ul li:contains('"+lk+"')").animate({width:"200px"},"fast");
});
}else{
$("ul li ul").hide();
$("ul>li").animate({width:"200px"},"fast");
$("ul li:contains('"+lk+"')").animate({width:"1200px"},"fast",function(){
$("ul li:contains('"+lk+"')>ul").slideDown();
});
}
});
});
You will have to return false
for click
event for children ul
.
So do this:
$(document).ready(function(){
$("ul>li").click(function(){
var lk=$(this).text();
var w=$("ul li:contains('"+lk+"')").width();
$("ul li").removeClass("h");
$("ul li:contains('"+lk+"')").addClass("h");
if(w>200){var a=1;$("ul li").removeClass("h");}else{var a=0;}
if(a==1){
$("ul li:contains('"+lk+"') ul").hide(function(){
$("ul li:contains('"+lk+"')").animate({width:"200px"},"fast");
});
}else{
$("ul li ul").hide();
$("ul>li").animate({width:"200px"},"fast");
$("ul li:contains('"+lk+"')").animate({width:"1200px"},"fast",function(){
$("ul li:contains('"+lk+"')>ul").slideDown();
});
}
}).children().click(function(e) {
return false;
});
});
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.