Question

我正在使用'slideToggle'在网站上打开几个div，并希望确保在打开另一个div之前关闭所有div。有没有办法运行if..then以确保切换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>

致电标签;

<li><a href="#" id="toggle">Contact Me</a></li>

并称为div;

<div id="contact">blah, blah...</div>

和CSS;

#contact{display: none; padding: 7px; font-size: 14px;}

谢谢，

------ ------ EDIT 这似乎工作正常，我可以通过将速度设置为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>

Fiddle Example

Answer 1

如果您向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>

现在，您可以使用单个事件处理这两个链接。

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

最终结果是当您点击＆＃34;与我联系时，如果它已打开则将隐藏，如果隐藏，则联系人将显示隐藏或隐藏。

http://jsfiddle.net/nYLvw/

Answer 2

你可以实现一个辅助函数来折叠任何具有某个类的可见元素，然后在每次要切换div时调用它。

标记：

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

您也可以查看jQuery UI手风琴，它的默认行为也是如此。 http://jqueryui.com/accordion/

Answer 3

更新：添加小提琴链接例如

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

每当你补间效果时，如果你还没有补间，你就想要补间，你需要跟踪补间的状态。

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

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

>> SAMPLE FIDDLE <<

如果..然后在jQuery中检查open slideToggle（）

3 个答案: