ボタンをクリックすると、ページの外に配置されるドロップダウン メニュー (負のマージン) があります。ページを押し下げて、メニューを表示します。これを達成するためにCSS3を使用しており、これは正常に機能しています。
メニューの次のステップは、メニューをより動的にすることです。JQuery を使用して余白の値を設定し、(メニューの) リストに含まれる項目の数に関係なく、それに応じて余白が更新されるようにします。
私はこれを機能させることに非常に近づいています。すべての数学を持っていますが、css クラスを切り替えて高さを変更するときに問題が発生しています。クラスに現在のスタイルを上書きさせるには、!important ルールを使用する必要があります (眉をひそめ、嫌いです!)。 this) しかし、理想的には、!important を使用せずに同じことを達成する方法が必要です。誰かアイデアはありますか?
私がトグルしているクラスは.body-changeです
以下のコード:
<div id="menu">
<ul>
<li><a href="#home" class="contentLink">Guide</a></li>
<li><a href="#home" class="contentLink">Contents</a></li>
<li><a href="#home" class="contentLink">Calculator</a></li>
</ul>
</div>
.body-change{margin-top:141px !important}
.ui-page-active{
-webkit-transition: margin-top 0.35s linear;
-moz-transition: margin-top 0.35s linear;
-o-transition: margin-top 0.35s linear;
-ms-transition: margin-top 0.35s linear;
transition: margin-top 0.35s linear;
}
$(function() {
var numItems = $("#menu ul").children().length,
height = $('#menu ul li').outerHeight(),
margin = numItems * height;
console.info('Margin is ' + margin + 'px');
// Toggle menu
$('#menu').css('margin-top', -margin)
$('.body-change').css('margin-top', margin)
$("#sidemenu").on('click', function() {
$(".ui-page-active").toggleClass("body-change");
});
});
JQuery で示されているように、ロード時にメニューのマージンを正しい負の値に設定しました。次に、クラス body-change を切り替えます。JQuery で body 変更の css を設定する必要がありますが、!important ルールを使用する必要があるため、これを行うのに苦労しています..
何か案は?