javascript - jQuery切换不保持打开状态

Question

试图切换 div 以扩展和收缩，它基本上是一个菜单，带有 subnav。所以我最初将高度设置为 48px 以隐藏子导航，如果没有 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() {
    $('#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
      }
    );     
});