我正在尝试创建一个移动移动菜单系统。
如果你点击'菜单项4',主菜单项会显示'display none',这就是我想要的,但是我想点击'菜单项4'重新启用它们我似乎无法解决问题:
示例:http://jsfiddle.net/zidski/g3jkgyhy/
$("#menu-icon").on("click", function(){
$("#sb-navigation").slideToggle();
$(this).toggleClass("active");
setTimeout(function(){
$('#level1').hide();
}, 500);
$('.item').css('display', 'block');
});
$("#submenu").on("click", function(){
$("#level1").slideToggle();
$(this).toggleClass("active");
var v = $(this).toggleClass("active");
var j = $('#sb-navigation nav ul li.item');
if ($('#level1').is(':visible')){
$(j).css('display', 'none');
//alert('test');
}else {
$(j).css('display', 'block');
}
});
答案 0 :(得分:0)
请参阅http://jsfiddle.net/g3jkgyhy/1/
您需要更改
$("#level1").slideToggle()
到
$("#level1").slideToggle(function() {
slideToggle采取这个完成回调,这是你需要检查:visible。当你只是调用slideToggle()并继续代码时,你会在slideToggle完成运行之前到达你的is:visible check,所以#level1的可见性总是为真。