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>

我说它应该下滑＆＃34; topMenu＆＃34;其中包括＆＃34; top-top＆＃34;和＆＃34;上下＆＃34;。但它只是滑动＆＃34;顶部＆＃34;。

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

如果您尝试将整个#topMenu div放在屏幕上（顶部值为负值），然后在top属性上设置动画而不是slideDown，该怎么办？

快速模拟我的意思：

<强>小提琴：
http://jsfiddle.net/vLeyF/

<强> JS：

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

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

Answer 3

最好使用.slideToggle代替.slideDown。

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

jQuery的：

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

slidedown菜单，同步滑动内容jquery

3 个答案: