Question

我遇到了这种风格的问题：

案例：

当宽度<= 800时，function mlpushmenu更改transform :translate3d(-100%,0,0)
当宽度＆gt; 800更改transform : none !important（必须使用！important）
然后尝试更改宽度＆lt; = 800，因为它没有！重要function mlpushmenu无效，我需要删除transform : none !important

Jquery：

$(document).ready(function() {
function jqUpdateSize(){    // for check size
    var windowwidth = $(window).width();

    // for change transform, must set to !important
    var $lvl = $("<style>.level > ul > li > .level {transform : none !important}</style>");

    if (windowwidth <= 800){
        // remove style not working
        $lvl.remove();

        // WHEN THIS MLPUSH MENU WORK it's change transform.
        new mlPushMenu( document.getElementById( 'menu' ), document.getElementsByClassName( 'btnslick' )[0], {
            type : 'cover'
        });
    }else{
        $lvl.appendTo("head");
    }
};
$(document).ready(jqUpdateSize);
$(window).resize(jqUpdateSize);
});

那不行？？我做错了？

如何删除那个！important？

Answer 1

我会改变这个，以便使用CSS类来应用样式。所以有这样的课程：

.withTranslate {
    transform: translate3d(-100%,0,0);
}

.withoutTranslate {
    transform: none !important;
}

然后更改您的JavaScript以执行以下操作：

function jqUpdateSize() {
    // Get current width
    var windowWidth = $(window).width();

    var $lvl = $(".level > ul > li > .level");

    // Remove both classes
    $lvl.removeClass("withoutTranslate").removeClass("withTranslate");

    // Add appropriate class depending on width
    $lvl.addClass(windowWidth <= 800 ? "withoutTranslate" : "withTranslate");

    // Other code
    [...]
};

移除样式重要的是附加

1 个答案: