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

jQuery切换不保持开放

4 个答案: