Question

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

我认为有太多按钮可以使if函数在打开时按名称测试每个div，然后向上滑动。所有开放的div都有一般滑动吗？

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

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

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

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

Answer 1

我看到的最简单的方法是向所有div添加一个类（如row）并使用它来隐藏它们 $(".row").not(".rowX").slideUp(); not rowX用于保持切换活动（并且使用该更新，顺序无关紧要;)）。

那最终会像：

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

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

JS slideToggle关闭其他打开的div

2 个答案: