jquery - 下拉菜单，jquery同步滑动内容

Question

嗨，我用 jquery 构建了一个简单的下拉菜单，可以在 http://testsiteproject.bugs3.com/找到

当我点击灰色的顶部按钮时，我的问题就出现了，我还希望黑色按钮跟随菜单而不是在 div 已经向下滑动后出现。有没有办法做到这一点？

<div id="topMenu">
<div id="top-top"></div>
<a href='javascript:slideMenuUp();'>
<div id="top-bottom"></div>
</a>
</div>

我说它应该向下滑动“topMenu”，其中包括“top-top”和“top-bottom”。但它只滑动“顶部”。

function slideMenu(){
    if ($("#topMenu").is(":hidden")) {
        $("#topMenu").slideDown("slow");
    } else {
        $("#topMenu").hide();
    }
}

Answer 1

#top-bottom将位置从更改absolute为relative。

#top-bottom{
    position: relative;
    left:45%;
    height: 50px;
    width:100px;
    background:url(../images/top-up.png) no-repeat;

}

Answer 2

如果您尝试将整个#topMenudiv 放置在屏幕外（顶部值为负），然后在top属性上而不是slideDown.

我的意思的快速模型：

小提琴：http:
//jsfiddle.net/vLeyF/

JS：

$("#topMenu").animate({top: 0}, "slow");

然后从这里你可以动画回top你之前拥有的任何属性等等。但是，看看 Spokey 的答案，你可能仍然需要做这部分（#top-bottom从切换position:absolute到position:relative）。

Answer 3

最好使用.slideToggle而不是.slideDown.

小提琴：http: //jsfiddle.net/hMsTJ/1/

jQuery：

$('#topContent').hide();
// Add animation
$('#topMenu a').click(function(){
    $('#topContent').slideToggle('slow', function() {
    // Animation complete.
  });
});