jQuery 切换不保持打开状态

jQuery toggle not staying open

本文关键字：状态 jQuery      更新时间：2023-09-26

试图切换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') 
    };
  });
});

可能过于复杂了。我相信还有一个更简单的解决方案。

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') 
    };
  });

这应该有效（并且也可以处理多个元素）

$('#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') ;
    };
});

很好，很容易

$('#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
      }
    );     
});
相关文章：