jQuery切换不保持打开

Question

试图切换div来展开和收缩，它基本上是一个菜单，带有subnav。所以我最初设置高度为48px隐藏subnav和万一没有JS它仍然看起来像样，然后我分配一个开关打开和关闭div（在这种情况下设置高度）

它保持清爽，自动打开div。不想保持开放，只是扩大，发出警报，然后再关闭。

jQuery(document).ready(function($) { 
$('#nav-wrapper').css('height','48px'); 
    $('#menu-item-18').click(function() { 
    var open = false; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     var isOpen = false; 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     isOpen = !isOpen; 
     alert ('open') 
    }; 
    }); 
}); 

可能会超过这一点。我相信也有一个更简单的解决方案。

Answer 1

isOpen在本地范围内定义，因此该值将始终为false。您需要将其移至点击处理程序之外，然后您只需要isOpen = !isOpen;即可切换值。见下文，

$('#nav-wrapper').css('height','48px'); 
    var isOpen = false; 

    $('#menu-item-18').click(function() { 
    isOpen = !isOpen; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     alert ('open') 
    }; 
    }); 

Answer 2

这应该工作（和处理多个元素以及）

$('#menu-item-18').click(function() { 
    var isOpen = $(this).is('.open'); 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0); 
     $(this).removeClass('open'); 
     alert ('not open'); 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0); 
     $(this).addClass('open'); 
     alert ('open') ; 
    }; 
}); 

Answer 3

没有任何变量，这是更简单的方法我能想到的的使用;

$('#menu-item-18').click(function() { 
if($(this).hasClass("active")) { 
    $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
    $(this).removeClass("active"); 
} else { 
    $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
    $(this).addClass("active"); 
} 
}); 

Answer 4

尼斯和容易

$('#menu-item-18').click(function() { 
    $('#nav-wrapper').slideToggle(200, //speed in ms 
     function() { 
     //callback (runs after shown or hidden) 
     $(this).is(':visible'); //Returns true if not hidden false if hidden 
     } 
    );  
});