slidetoggle JQuery的多个实例

Question

我有3个div用于在我的网站页面顶部显示导航。全部使用JQuery函数：

$('#div_button').click( function() {
        $('#div_nav').slideToggle();
);

问题是，我可以得到一个场景，我在彼此之上得到2个slidetoggles / div，这不是很好。当我单击一个按钮开始slideToggle时，我想删除当前正在显示的任何其他div。

描述问题的图片：

有人可以提出解决方案吗？

提前致谢

Answer 1

hide()所有其他div首先

$('#div_button').click( function() {
    $('.otherDivClass').hide(); 
   $('#div_nav').slideToggle();
);

Answer 2

使用像Accordion这样的插件，您可以应用您所需的功能，而无需在标题和内容元素中添加类。

http://api.jqueryui.com/accordion/

另一种选择，如果你确信你需要坚持使用ID，那就是编写3个单独的点击功能，每个功能都打开和关闭相关元素。

Answer 3

我设法找到解决这个问题的方法。基本上你需要使用这个函数来等待其他slideToggles或slideUPs完成：

$('#tcd-home-view-nav').slideUp(function(){
    // Animation complete.
    $('#tcd-home-edit-nav').slideToggle();
});

欢呼人们帮我解决这个问题。克里斯