0

ボタンをクリックすると、ページの外に配置されるドロップダウン メニュー (負のマージン) があります。ページを押し下げて、メニューを表示します。これを達成するために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 ルールを使用する必要があるため、これを行うのに苦労しています..

何か案は？

4

2 に答える 2

2

同じ問題が発生したら、これを試してください。

$("#SomeElement").css("cssText", "height: 650px !important;");

クロスブラウザソリューションかどうかわからないというのは重要です

于 2013-03-14T13:56:41.230 に答える