jQuery切换不保持打开

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

它保持清爽，自动打开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') 
    }; 
    }); 
});

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

来源

2012-04-19 Lukasz

'isOpen'没有在这里定义...所以它总是会在返回false的if语句 – 2012-04-19 19:08:16

我们能不能看到你为这个HTML？谢谢！ – jasonmerino 2012-04-19 19:09:59

哦，废话，我打开，而不是isOpen ....傻我。 – Lukasz 2012-04-19 19:50:43

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

来源

2012-04-19 19:05:07

保持返回“不打开”，并仍然像我的其他脚本刷新回原始状态:( – Lukasz 2012-04-19 19:47:55

@Lukasz理想情况下，它不应该。你在哪里有这个代码？你可以设置一个[jsFiddle]（http：// jsfiddle .net /）的这个？ – 2012-04-19 19:52:47

http://jsfiddle.net/cZhvC/2/ – Lukasz 2012-04-19 19:59:38

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

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

来源

2012-04-19 19:08:45

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

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

来源

2012-04-19 19:09:07 Diabolic

尼斯和容易

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

来源

2012-04-19 19:09:17

Oh snap ... slideToggle jQuery UI only？ – 2012-04-19 19:28:01

希望我能做到这一点，我使用wordpress，它有UL为subnav嵌套的UL和背景扩展跨越两个，但设置在一个容器div：/ – Lukasz 2012-04-19 19:35:41

nope不仅jQuery，UI有更多的缓动选项，虽然http://api.jquery.com/slideToggle/ – Lukasz 2012-04-19 19:49:37

jQuery切换不保持打开

回答

相关问题