0

私はここ数日メニューを開発してきました。それは拡張可能/折りたたみ可能(それは単語でさえありますか?)メニューとして機能します。今のところ、メニューはデフォルトで縦方向に大きくなっていますが、「+/-」ボタンをクリックすると、縦方向にサイズが小さくなります。もう一度クリックすると、縦に大きくなります。

JQueryの部分は次のとおりです。

$(window).load(function() {
    $('.gh-gallink').toggle(function() {
        $('.gallery_container').animate({
            marginTop: "-60px",
            paddingTop: "75px",
            paddingBottom: "0px",
            height: "36px"
        }, 1000)
    }, function() {
        $('.gallery_container').animate({
            marginTop: "0px",
            paddingTop: "40px",
            paddingBottom: "0px",
            height: "100px"
        }, 1000);
    });
});

トグルボタンのhtmlは次のとおりです。

< p class = "gallerylink" >
< a href="#" class="gh-gallink" title="Expand / Collapse Menu" >
    + / -
< /a >
< /p >

だから今、すべてがうまく機能しています。メニューは正しく機能し、「+/-」をクリックすると、垂直方向に小さくなるか、垂直方向に大きくなります。しかし、私はメニューにdeafultで「-」を表示したいと思います(メニューはデフォルトで大きいため)。そして、-記号をクリックして小さくすると、「+」が表示されます。フェードイン/フェードアウトトランジションも素晴らしいでしょう。

どんな助けでも深く感謝します!:)

4

1 に答える 1

3

サイズを直接変更する場合は、メソッドを次のようにanimate()チェーンし、明示的に定義します。text()animate()

/* ...the animate stuff to make smaller...*/});
$(this).text('+');

/* ...the animate stuff to make larger...*/});
$(this).text('-');

JSフィドルデモ

于 2012-11-22T21:40:17.330 に答える