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

5 回答 5

3

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

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

您还可以确定事后的发展方向：

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

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

于 2012-05-18T15:03:35.960 回答
2

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

现在，该代码将向下滑动，因为您的 CSS 具有 display:none; 在里面。

于 2012-05-18T15:03:32.893 回答
1

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

于 2012-05-18T15:03:22.707 回答
1

直接从这里的 jQuery 站点 (http://api.jquery.com/slideToggle/)

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

希望这可以帮助。

于 2012-05-18T15:04:48.317 回答
1

您可以使用 jquery css 函数，我在这里编写 javaScript 代码，并在代码中进行了一些更改，

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

请参考完整的工作示例

于 2012-05-18T15:08:20.327 回答