Question

此代码如何确定向上切换或向下切换？请帮忙。感谢。

<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>

Answer 1

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

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

你也可以确定之后的方向：

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

当然，这是假设你没有任何定位元素，它看起来好像你没有。

Answer 2

如果元素当前设置为display：none;或以其他方式隐藏。例如，高度为0。然后它会向下滑动，否则它会向上滑动。

现在，当您的CSS显示时，该代码将向下滑动：none;在它。

Answer 3

它会检查要切换的内容是否可见

Answer 4

直接来自jQuery网站（http://api.jquery.com/slideToggle/）

如果元素最初显示，它将被隐藏;如果隐藏，它将被显示。将根据需要保存和还原display属性。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。隐藏动画后高度达到0时，显示样式属性设置为无，以确保该元素不再影响页面布局。

希望这有帮助。

Answer 5

你可以使用jquery css函数，我在这里编写javaScript代码，代码中有一些更改，

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

请参阅完整的工作example

如何知道slideToggle（）是向上还是向下移动？

5 个答案: