Question

已解决请查看以下评论

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $('#playlistToggle').click(function(event) {

        event.preventDefault();

        if($('#playlist').is(":hidden"))
        {
            $('#playlist').slideUp('medium');
        }

        else
        {
            $('#playlist').slideDown('medium');
        }

    });

});
</script>

<style type="text/css">
    #playlist_wrapper
    {
        bottom: 30px;
        height: 75px;
        overflow: hidden;
        position: fixed;
        width: 100%;
        background-color: yellow;
    }

        #playlist
        {
            background-color: #FF6633;
            border: 1px solid #666666;
            height: 75px;
            width: 920px;
            position: relative;
            bottom: 0;
            margin: 0 auto;
            visibility: hidden;
        }
</style>

</head>

<a href="#" id="playlistToggle">Toggle Playlist</a>

<div id="playlist_wrapper">
    <div id="playlist"></div>
</div>

当您按下按钮时，此脚本应该向上滑动播放列表div。但是，当你点击它时没有任何反应。如果你改变：

如果（$（ '＃播放列表'）是（ “：隐藏”））

致：

如果（$（ '＃播放列表'）是（ “：可见”））

将css #playlist visibility属性从“hidden”更改为“display”，然后div滑到顶部，向下滑动到底部，与我想要它完全相反。我在这里做错了什么？

编辑：澄清：我需要从一开始就隐藏播放列表div，然后在我点击切换按钮时向上滑动。

Answer 1

如果

，对象仅隐藏隐藏

* They have a CSS display value of none.
* They are form elements with type="hidden".
* Their width and height are explicitly set to 0.
* An ancestor element is hidden, so the element is not shown on the page.

#playlist似乎不符合任何条件，因此选择器在#playlist上不匹配。你可以取消.is(':hidden')部分并在没有它的情况下到期吗？

Answer 2

.slideUp是.hide的同义词（虽然有不同的效果设置）

同样

.slideDown是.show

的同义词

所有4个都只是预设的动画。

如果你阅读了slideUp和slideDown的jQuery文档，他们会这样：

slideUp:

描述：用滑动动作隐藏匹配的元素。

slideDown:

描述：用滑动动作显示匹配的元素。

Ergo：使用slideDown使内容可见而不是slideUp

CSS div定位和jQuery slideUp疯狂

2 个答案: