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

Question

试图切换一个 div 来扩展和收缩，它基本上是一个菜单，带有子导航。所以我最初将高度设置为 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') 
    };
  });