Question

我的问题有点复杂。

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

我的问题是：有没有办法阻止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');
      });
});

如何从重写内联样式中停止jQuery动画？

1 个答案: