JS slideToggle 关闭其他打开的 div答案

【问题标题】：JS slideToggle close other open divsJS slideToggle 关闭其他打开的 div
【发布时间】：2011-09-13 13:27:13
【问题描述】：

我在一个页面上有大约 20 个按钮。我已经用 jquery 将它们设置为滑动切换以显示和隐藏 div。它工作得很好，但前提是在选择新 div 之前使用相同的按钮关闭 div。我希望如果单击一个按钮，它将向上滑动打开的 div，然后再向下滑动自己的 div。现在，如果一个 div 仍在显示，并且单击了不同的按钮，则打开的 div 不会关闭。

我认为有太多按钮无法创建一个 if 函数来按名称测试每个 div 是否打开，然后向上滑动。是否有所有打开的 div 的一般幻灯片？

如果我添加一个类并使用 css 来显示：块，我没有得到动画，所以我使用的是 slidetoggle。如果有更好的方法，我很乐意重做我的代码？有没有办法关闭打开的 div？

$(document).ready(function(){
  $('.show1').click(function(){
    $(".row1").slideToggle();
  });

  $('.show2').click(function(){
    $(".row2").slideToggle();
  });

  $('.show3').click(function(){
   $(".row3").slideToggle();
  });
});

【问题讨论】：

显示一些 html 标记。

标签： javascript jquery

【解决方案1】：

我看到的最简单的方法是向所有 div 添加一个类（如row）并使用隐藏它们 $(".row").not(".rowX").slideUp(); not rowX 是为了让切换保持活动状态（随着更新，顺序不再重要;)）。

最终会是这样的：

$('.show3').click(function(){
   $(".row").not(".row3").slideUp();
   $(".row3").slideToggle();
});

【讨论】：

太棒了——我喜欢这个逻辑。它运作良好，除了一点。现在，如果它打开并且我按下按钮切换关闭它不会。它会先向上滑动，然后再向下滑动！所以我本质上失去了切换功能。我想我可以将函数拆分为多个部分，除非有更好的方法？

【解决方案2】：

最简单的方法是检查其他 div 是否正在显示，如果显示，则关闭它们。我只在下面展示了 2 个 div，但是您可以创建一个 div 数组并循环遍历所有这些 div。

这已经关闭了所有 div，然后当打开一个时，每次单击一个时，其余的切换关闭。

$("#div1").hide();
$("#div2").hide();

$("#div1Button").click(function () {
   $("#div1").slideToggle();

   if ($("#div2")[0].style.display != "none") {
       $("#div2").slideToggle();
   }
})

$("#div2Button").click(function () {
    $("#div2").slideToggle();

    if ($("#div1")[0].style.display != "none") {
        $("#div1").slideToggle();
    }
})

【讨论】：