JQuery 添加 CSS 点击功能无效

JQuery add CSS on click function not working

我在 Windows RT 设备(平板电脑)上使用 IE 时遇到问题。我在它下面有菜单和子菜单。如果菜单部分有子菜单,那么它有 class "multi-level" 和 "inner-link"。在 "hover"、"active"、"selected" 时,在适当的桌面设备上显示子菜单,在同一 Windows RT 设备上的其他浏览器上,被视为单击菜单选项以显示子菜单.然而IE对此并不友好

所以我做了这个解决方案,它阻止了菜单选项点击的默认操作(在 IE 中点击进入子菜单选择的第一页)然后添加了 onclick CSS "display !important" 来显示子菜单,它们在 classes "list" 和 "lvl-2".

的标签下

但是这个解决方案部分起作用,它阻止了 IE+touch 的默认点击,但不会在同一次点击时将 CSS 添加到所需的元素。

我的代码:

$(function ieTouch() {

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    var ifTouch = ua.indexOf("Touch");

    if ((msie != 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))&& ifTouch != -1) {      // If Internet Explorer and touchscreen
        $(".multi-level .inner-link").click(function (e) {
            e.preventDefault ? e.preventDefault() : event.returnValue = false;
            $(e.currentTarget).find("ul.list.lvl-2").css("display", "block", "important");
        });
    }    
});

在此感谢您的帮助。

我认为 e.currentTarget.style.setProperty('display' 'block', 'important'); 可能是最好的解决方案。

jQuery 不支持 css 中的优先级...您需要使用纯 javascript

$.each($(e.currentTarget).find("ul.list.lvl-2"),function(el){
    $(el).get(0).style.setProperty('display','block', 'important');
};