Question

我希望我的下拉动画看起来好像是从上面落下而不是像SlideToggle动画那样从高度0到100％显示。我使用顶部，但它没有隐藏在上面所以我切换到margin-top。我想要的下拉动画正在工作，但它在标题和滑动时的切换按钮上方。我为标题和切换按钮设置了更高的z-index，但它不起作用。

<body>
    <header>
    HEADER
    </header>
    <div id="opt-slide">
    <span id="toggle">OPTIONS</span>

    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
    </div>
</body>
<style>
    * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
    header { height:200px; background:#39F; z-index:4;}
    #opt-slide { width:300px;}
    #toggle { background:#099; display:block; height:50px; color:#FFF; line-height:50px; z-index:4;}
    #dropdown { background:#0C9; list-style:none; margin-top:-450px; z-index:2; opacity:0;}
    #dropdown li { height:40px; line-height:40px;}
    #dropdown li:hover { background:#FAFAFA;}

</style>

脚本：

<script>
$(document).ready(function() {

    var top = $('header').height() + $('#toggle').height() + $('#dropdown').height();

    $('#toggle').click(function() {

        if($('#opt-slide').hasClass('open')){
            $('#dropdown').animate({marginTop:-top, opacity:0},'slow');
            $('#opt-slide').removeClass('open');
        }else{
            $('#dropdown').animate({marginTop:0, opacity:1},'slow');
            $('#opt-slide').addClass('open');
        }


    });

    $('#dropdown > li').click(function() {
        $('#dropdown').animate({marginTop:-top},'slow');
        $('#opt-slide').removeClass('open');
    });

});
</script>

Answer 1

写：

CSS：

#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}

JS：

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});

$('#dropdown > li').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});

DEMO here.

Answer 2

您需要将position:absolute设置为元素才能使top属性生效。然后将position:relative设置为父元素也设置为#toggle和header，以便应用z-index堆叠。

下拉动画下降

2 个答案: