jquery - 如何阻止 jQuery 动画覆盖内联样式？

Question

我的问题有点复杂。

我有一个导航菜单，其中包含依赖slideDown()动画功能的下拉菜单。margin-top由于我设置样式的方式，我的下拉列表必须有一个，但我必须margin-top在窗口加载后根据用户的字体、缩放等设置使用 jQuery 设置。为此，我使用attr("style","margin-top: -22px !important"). 这使我的下拉菜单完全可以正常工作。但是...当我使用 时slideDown()，jQuery 会删除 my !important，这对下拉动画至关重要。如果我不使用!important,会同时为和slideDown()设置动画，这看起来不太好。margin-topheight

我的问题是：有没有办法阻止 jQuery 覆盖我的内联样式？

示例：http: //jsfiddle.net/Sy9dC/3/

Answer 1

使用css({})更改元素的 css 属性值：

$(".navigation-secondary-submenu").css('margin-top'," -10px");

或者您可以使用：

$(".navigation-secondary-submenu").removeClass('old_class').addClass('new_class')

其中new_class有你的 CSS 属性。

.new_class{
    ******
    margin-top: -10px !important;
}

或者这个 css 属性将被动态添加：

$(docyment).ready(function(){
      $(".navigation-secondary-submenu").attr('style','margin-top:-22px !important');

     $("button").click(function() {
         $(".navigation-secondary-submenu").attr('style','margin-top:-10px !important');
      });
});