JQuery add CSS on click function not working

Question

I have issue with IE on Windows RT devices(tablets). I have menu and submenus under it. If menu section has submenu then it has class "multi-level" and "inner-link". On proper desktop devices submenus are displayed when "hover","active", "selected", which on other browser on the same Windows RT device are trated as click on menu option to display submenu. However IE is not that friendly on that.

So I did this solution, which prevents default action on menu option click(that on click in IE lands to first page of submenu selections) and then added onclick CSS "display !important" to display submenu, which are under tag with classes "list" and "lvl-2".

However this solution works partialy, it prevents default on click for IE+touch, but does not add CSS to needed elements on the same click.

My code:

$(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");
        });
    }    
});

Thank in forward for any help.

Answer 1

I think e.currentTarget.style.setProperty('display' 'block', 'important'); might be the best solution.