logo标签列表

如何知道slideToggle()向上还是向下移动？

jqueryjquery-ui
4
这段代码如何判断是向上切换还是向下切换？请帮忙解决。谢谢。
<html>
    <head>    
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function(){
                $(".flip").click(function(){
                    $(".panel").slideToggle();
                });
            });
        </script>

        <style type="text/css"> 
            div.panel,p.flip {
                margin:0px;
                padding:5px;
                text-align:center;
                background:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            div.panel {
                height:120px;
                display:none;
            }
        </style>
    </head>

    <body>
        <div class="panel">
            <p>Crap.</p>
        </div>
        <p class="flip">Show/Hide Panel</p>
    </body>
</html>
5个回答
3

您可以检查元素是否可见。如果它可见，slideToggle()将向上移动。如果不可见，则会向下移动。

// Want to know if it's visible?
$(this).is(":visible");

您也可以事后确定它所采取的方向：

注：这里的“after the fact”是一种英语习语，意思是指在某个事件发生后再去考虑它。

$(".panel").slideToggle("slow", function(){
  alert( "I moved " + $(this).is(":visible") ? "Down" : "Up" );
})

当然，这是基于你没有任何定位元素的情况下，看起来好像确实没有。
2
如果元素当前设置为display:none;或以其他方式隐藏。例如，高度为0。那么它将向下滑动，否则它将向上滑动。
现在，因为你的CSS中有display:none;，所以该代码将向下滑动。
1

您可以使用jQuery CSS函数，我在此处编写JavaScript代码并对代码进行了一些更改。

$(document).ready(function(){
    $(".flip").click(function(){
       if($(".panel").css("display") == 'block') {
          alert('Visible');
       } else {
          alert('Not visible');
       }
    $(".panel").slideToggle();
  });
});​

请参考完整的工作示例。
根据你的需要，你想在操作之前还是之后收到提醒？将if语句块放在我的slideToggle函数调用之前或之后。 - Umesh Aawte
1

它检查即将切换的内容是否可见

1

直接从jQuery网站上获取（http://api.jquery.com/slideToggle/）

如果元素最初是显示的，则会被隐藏；如果已经隐藏，则会被显示。显示属性将根据需要保存和恢复。如果一个元素具有内联显示值，然后被隐藏和显示，它将再次以内联方式显示。当高度在隐藏动画后达到0时，显示样式属性将设置为none，以确保该元素不再影响页面的布局。

希望这可以帮助您。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接