我有一个下拉菜单，在单击按钮时位于页面之外(负边距)我希望页面被按下并显示菜单。我正在使用 CSS3 来实现这一点并且工作正常。
我的菜单的下一步是让它更动态，我想使用 JQuery 来设置边距值，这样无论列表(我的菜单)中有多少元素，边距都会相应地更新。
我已经非常接近这个工作了，我已经掌握了所有的数学知识，但是在切换 css 类以更改高度时我遇到了问题。为了让类覆盖我当前的样式，我需要使用 !important 规则(我不喜欢它，我讨厌它!)，首先我在使用 JQuery 的 !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 规则..
有什么想法吗？
最佳答案
一旦我遇到同样的问题，试试这个:
$("#SomeElement").css("cssText", "height: 650px !important;");
重要的是我不知道它是否是跨浏览器的解决方案
关于JQuery CSS !重要，单击时更改 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15407907/