1

こんにちは、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>

「top-top」と「top-bottom」の両方を含む「topMenu」をスライドダウンする必要があると言います。しかし、それは「上から上へ」スライドするだけです。

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

3 に答える 3

0

.slideToggleの代わりに使用することをお勧めします.slideDown。

フィドル: http://jsfiddle.net/hMsTJ/1/

jQuery:

$('#topContent').hide();
// Add animation
$('#topMenu a').click(function(){
    $('#topContent').slideToggle('slow', function() {
    // Animation complete.
  });
});
于 2013-04-25T08:57:56.553 に答える
0

#top-bottom位置を からabsoluteに変更しrelativeます。

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

}

于 2013-04-25T08:42:46.907 に答える
0

#topMenudiv 全体を画面から外して (負のトップ値で) 配置してから、 のtop代わりにプロパティでアニメーション化するとどうなるでしょうかslideDown。

私が言いたいことの簡単なモックアップ：

フィドル:
http://jsfiddle.net/vLeyF/

JS:

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

次に、ここから、以前に持っていたプロパティにアニメーションを戻すことができますtop。ただし、Spokey の回答を見ると、おそらくその部分も行う必要があります (#top-bottomからposition:absoluteに切り替えposition:relativeます)。

于 2013-04-25T08:43:02.200 に答える