Javascript 如果..，则在jQuery中检查是否打开了slideToggle（）

我使用“slideToggle”在一个站点上打开几个div，并希望确保在打开另一个div之前关闭所有div。有没有办法运行if..then以确保在打开另一个div之前切换的div没有打开

这是我的剧本

<script type="text/javascript">
$(function()
  {
     $("a#toggle").click(function() {
          $("#contact").slideToggle(500);
          return false;
 });
 $("a#toggle_about").click(function(){
          $("#about").slideToggle(500);
          return false;
     });
  });
</script> 

谢谢

------编辑------ 这似乎工作正常，我可以通过将速度设置为500或0来控制过渡。这似乎是一个简单的if..then的很多代码

感谢您的建议和可能的解决方案

<script type="text/javascript">
$(function()
  {
     $("a#toggle").click(function(){
         if ($("#about").is(':hidden')){
            $("#contact").slideToggle(500);
    return false;
     }else{
            $("#about").slideToggle(500);
            $("#contact").slideToggle(500);
    return false;
         }
 });
 $("a#toggle_about").click(function(){
    if ($("#contact").is(':hidden')){
              $("#about").slideToggle(500);
              return false;
    }else{
              $("#contact").slideToggle(500);
              $("#about").slideToggle(500);
      return false;
        }
     });
  });
</script> 

$（函数（）
{
$（“a切换”）。单击（函数（）{
如果（$（“#about”）.is（'：hidden'））{
$（“#联系人”）。滑动切换（500）；
返回false；
}否则{
$（#about”）。滑动切换（500）；
$（“#联系人”）。滑动切换（500）；
返回false；
}
});
$（“切换”）。单击（函数（）{
如果（$（“#contact”）.is（'：hidden'））{
$（#about”）。滑动切换（500）；
返回false；
}否则{
$（“#联系人”）。滑动切换（500）；
$（#about”）。滑动切换（500）；
返回false；
}
});
});

---

您可以实现一个helper函数，用某个类折叠任何可见元素，然后在每次切换div时调用该函数

标记：

<div id="contact" class="toggle-content">blah, blah...</div>

---

您还可以查看jQueryUIAccordion，它的默认行为实现了同样的功能

更新：例如添加了Fiddle链接

---

有几种方法可以解决这个问题

无论何时，当您为实现效果而使用tween时，如果您不想使用tween，那么您将希望跟踪tween的状态

通常，您可能有一个触发器/切换器和一个目标。我喜欢使用闭包来完成状态跟踪。我可以用这样的方法：

$(function () {
    // closures
    var $togglers = $('[selector][, selector]');
    var $target = $('[selector]');
    $target.tweening = false;
    var tweenStop = function () {
        $target.tweening = false;
    };
    var togglerClick = function () {
        if (!$target.tweening) {
            $target.tweening = true;
            $target.slideToggle(500, tweenStop);
        }
    };
    // handle the event
    $togglers.click(togglerClick);
});

---

如果在html中添加适当的类，并将href更改为指向需要打开的div，则可以显著简化代码

<ul>
    <li><a href="#contact" class="toggler">Contact Me</a></li>
    <li><a href="#about" class="toggler">About Me</a></li>
</ul>
<div id="contact" class="toggleable">blah, blah...</div>
<div id="about" class="toggleable">blah, blah...</div>

最终结果是，当您单击“联系我”时，“关于”将在打开时隐藏，而“联系”将在隐藏时显示，或在显示时隐藏

---

您可以使用：visible选择器。您可以使用show（）和hide（）来代替。然后，您可以在对单个元素运行show（）之前隐藏（）所有元素。即使使用show（）/hide（），我仍然需要一种方法来检查div是否已打开。@Mgfranz在您的问题中说，您需要确保在打开另一个div之前关闭所有div。这并不要求您知道div是否打开。还有其他原因吗？@MiniRagnarok，使用slideToggle（），它会使被调用的div保持打开状态，直到再次单击href，我想在调用另一个div之前验证一个div是否已关闭。手风琴可以很好地工作，因为ui已经加载。；-）

<div id="contact" class="toggle-content">blah, blah...</div>

function hideToggleContent() {
    $('.toggle-content:visible').slideUp( 500 );
}

$(function() {
    $("#toggle").click( function() { 
        var isVisible = $("#contact").is(':visible');
        hideToggleContent();

        if( isVisible ) {
            return false;
        }

        $("#contact").slideDown( 500 );
        return false;
    });
    $("#toggle_about").click( function() {
        var isVisible = $("#about").is(':visible');
        hideToggleContent();

        if( isVisible ) {
            return false;
        }

        $("#about").slideDown( 500 );
        return false;
    });
});

$(function () {
    // closures
    var $togglers = $('[selector][, selector]');
    var $target = $('[selector]');
    $target.tweening = false;
    var tweenStop = function () {
        $target.tweening = false;
    };
    var togglerClick = function () {
        if (!$target.tweening) {
            $target.tweening = true;
            $target.slideToggle(500, tweenStop);
        }
    };
    // handle the event
    $togglers.click(togglerClick);
});

<ul>
    <li><a href="#contact" class="toggler">Contact Me</a></li>
    <li><a href="#about" class="toggler">About Me</a></li>
</ul>
<div id="contact" class="toggleable">blah, blah...</div>
<div id="about" class="toggleable">blah, blah...</div>

$(".toggler").click(function (e) {
    e.preventDefault();
    var target = $(this).attr("href");
    $(".toggleable").not(target).hide();
    $(target).slideToggle();
});