0

我有一个下拉菜单，在单击按钮时位于页面外（负边距）我希望向下推页面并显示菜单。我正在使用 CSS3 来实现这一点并让它正常工作。

我对菜单的下一步是使其更具动态性，我想使用 JQuery 来设置边距值，以便无论（我的菜单）列表中有多少项目，边距都会相应地更新。

我已经非常接近这项工作了，我已经掌握了所有数学知识，但是在切换 css 类以更改高度时遇到了问题。为了让课程覆盖我当前的样式，我需要使用 !important 规则（皱眉，我讨厌它！），首先我在使用 JQuery 的 !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 回答
0

不确定您是否已经弄清楚了，但是由于尚未得到答复，因此我将发布我所做的。

var bodyChange = $('.body-change');
var style = bodyChange.attr('style') + ' margin-top:' + margin + 'px !important;';
bodyChange.attr('style', style);
于 2014-10-10T15:33:46.763 回答