0

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.

bcesars
  • 1,016
  • 1
  • 17
  • 36
Mindaugas
  • 1,173
  • 5
  • 15
  • 31
  • 1
    Is your initial *if* statement definitely resolving `true`? – shennan Jan 28 '15 at 18:06
  • please try to log msie, !!navigator.userAgent.match and ifTouch.. are you sure that the if is actually true? – briosheje Jan 28 '15 at 18:15
  • 2
    `.css("display", "block", "important")` `css()` method doesn't accept a third argument – A. Wolff Jan 28 '15 at 18:20
  • Hello, yes it is true, I have had alert in it(also in click function) for half a day and removed before posting here. :) – Mindaugas Jan 28 '15 at 18:21
  • A. Wolff - well I tried also using .css("display", "block !important") and css("display","block"). Same result :/ – Mindaugas Jan 28 '15 at 18:24
  • Are you sure setting block is what you really need? Is the currentTarget the correct thing? Why are you not adding a class instead? – epascarello Jan 28 '15 at 20:48
  • Hello, actually I went for toggle class and restructured the code little bit, so now with few lines of jquery it is working. – Mindaugas Jan 30 '15 at 15:31

2 Answers2

1

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

David Knaack
  • 172
  • 1
  • 1
  • 8
1

jQuery does not support priority in css... you need to use pure javascript for it.

$.each($(e.currentTarget).find("ul.list.lvl-2"),function(el){
    $(el).get(0).style.setProperty('display','block', 'important');
};
Flash Thunder
  • 11,672
  • 8
  • 47
  • 91