Question

我有一个非常基本的jquery脚本，它使用h2作为“触发器”来切换它下面的div。

见到这里：

$(".toggle-container").hide();
$("h2.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
});

我试图创建一个“toggle all”链接但是会发生什么是打开或关闭的div无法识别，因此它会产生相反的效果。这是代码：

    $("p.toggle-all a").click(function(){
    $("h2.trigger").toggleClass("active");
    $(".toggle-container").slideToggle("slow");
});

基本上当单击p.toggle-all a时，我希望它能识别切换的div是否已关闭，如果是，则打开它们。或者，如果他们愿意关闭它们。

希望这是有道理的。非常感谢任何帮助或建议！

Answer 1

为什么不让事件设置完成脏工作而只是click()触发h2？

这将切换全部，这意味着如果它已打开，现在它关闭，如果关闭，现在打开

$("p.toggle-all a").click(function(){
    $("h2.trigger").each(function() { $(this).click(); });
});

这将关闭所有

$("p.toggle-all a").click(function(){
    $("h2.trigger.active").each(function() { $(this).click(); });
});

这将打开所有

$("p.toggle-all a").click(function(){
    $("h2.trigger:not(.active)").each(function() { $(this).click(); });
});

Answer 2

您应该验证div是否已打开：

$("p.toggle-all a").click(function(){        
    $.each($("h2.trigger"), function(){
        if($this).is(".active"))
        {
            $(this).next().show("slow");
            $(this).removeClass("active");
        }
        else
        {
            $(this).next().hide("slow");
            $(this).addClass("active");
        }
   });
});

Answer 3

$("p.toggle-all a").click(function(){
  var h2Trigger = $("h2.trigger");

  if ($("h2.trigger.active").length != h2Trigger.length) // if all are not active then disable and make all active, else make all active
  {
      h2Trigger.removeClass("active");
  }
  h2Trigger.toggleClass("active");
  $(".toggle-container").slideToggle("slow");
});

Answer 4

我对您的问题的解读是，如果任何项目已关闭，您需要“全部”按钮才能打开它们;如果所有都已打开，您希望它关闭它们。如果你真的只想反转他们的状态，hunter has you covered。： - ）

但是，如果我读了你，你应该这样做：

$("p.toggle-all a").click(function(){
    var divs;

    divs = $("h2.trigger:not(.active)");
    if (divs.length > 0) {
        // Some or all are closed, open them
        divs.click();
    }
    else {
        // All are open, close them
        $("h2.trigger").click();
    }
});

为了简洁起见，我上面使用了$(this).click();，但我并不喜欢从代码中触发事件处理程序。我宁愿拥有一个函数（例如，toggleState），它是从上面代码中的click处理程序和调用的。但它是一种风格选择，当然如果你用jQuery连接处理程序，你知道你可以调用click并触发它。

jQuery Toggle divs / add remove class

4 个答案: