私はここ数日メニューを開発してきました。それは拡張可能/折りたたみ可能(それは単語でさえありますか?)メニューとして機能します。今のところ、メニューはデフォルトで縦方向に大きくなっていますが、「+/-」ボタンをクリックすると、縦方向にサイズが小さくなります。もう一度クリックすると、縦に大きくなります。
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で「-」を表示したいと思います(メニューはデフォルトで大きいため)。そして、-記号をクリックして小さくすると、「+」が表示されます。フェードイン/フェードアウトトランジションも素晴らしいでしょう。
どんな助けでも深く感謝します!:)