What I want to achieve is a folding menu, but the slidetoggle can only be collapsed by clicking on it. What I want is to click on other options and the expanded menu will automatically collapse. How can I modify it?
The code is as follows:
$("> li", this).each(function () {
$(this).bind("click", function () {
if($(this).hasClass('active')){
//$(".inner ol").hide();
//$(this).siblings("ol").slideToggle(settings.speed);
$(this).next("ol").slideToggle(settings.speed);
$(this).removeClass('active');
}else{
$(this).siblings('li').removeClass('active');
//$(".inner ol").hide();
$(this).addClass('active')
$(this).next("ol").slideToggle(settings.speed);
}
});
});
//默认折叠
$("> ol", this).hide();
ringa_lee2017-07-05 11:08:06
The idea is as follows:
1. When you click on the current menu, record it, first close all open menus, and finally open yourself
$(".menu .menu-header").on("click",function(){
var toggleTarget=$(this);
//先把其他得关掉
$(".menu .menu-content").removeClass("active");
$(this).find(".menu-content").addclass("active");
})
The above code is just a demonstration example, give me a rough idea and see if it works
天蓬老师2017-07-05 11:08:06
I checked the information online and found that there is a slideup() function. Just use it to replace hide(). Thank you!
$("> li", this).each(function () {
$(this).bind("click", function () {
if($(this).hasClass('active')){
$(".inner ol").slideUp('500');
$(this).removeClass('active');
}else{
$(this).siblings('li').removeClass('active');
$(".inner ol").slideUp('500');
$(this).addClass('active')
$(this).next("ol").slideToggle(settings.speed);
}
});
});
//默认折叠
$("> ol", this).hide();