I have built a child theme in wordpress. I’m using jQuery to hide and reveal sub menus. Everything works great in all the browsers except IE. In IE none of my jQuery works for the sub menus. When I try to debug I get this error.
Line: 3
Error: Syntax error, unrecognized expression: nth-of-type
That error appears in the build-in jQuery library that wordpress uses. I am using nth-of-type selectors in my own Jquery, but even when I remove them the problem still persists. This is the jQuery I am using to control the sub menus
if ($("body").hasClass('taxonomy-colordesign')){
$("#hybrid-categories-5 h4").toggleClass("tabDown");//pulls the background image in the tab
$("#hybrid-categories-5 h4").siblings('.dots').toggleClass('active');//activates the little square next to it
$("#hybrid-categories-5 h4").next("ul.xoxo.categories").toggleClass("openTab");//opens up the ul that contains the list of options
$(".menu-main-menu-container li:nth-of-type(3) a").addClass("current");
}
else if ($("body").hasClass('taxonomy-colorart')){
$("#hybrid-categories-12 h4").toggleClass("tabDown");
$("#hybrid-categories-12 h4").siblings('.dots').toggleClass('active');
$("#hybrid-categories-12 h4").next("ul.xoxo.categories").toggleClass("openTab");
$(" #hybrid-categories-9, #hybrid-categories-3, #hybrid-categories-5").hide();
$(".menu-main-menu-container li:nth-of-type(2) a").addClass("current");
}
else if ($("body").hasClass('taxonomy-mediadesign')){
$("#hybrid-categories-3 h4").toggleClass("tabDown");
$("#hybrid-categories-3 h4").siblings('.dots').toggleClass('active');
$("#hybrid-categories-3 h4").next("ul.xoxo.categories").toggleClass("openTab");
$(".menu-main-menu-container li:nth-of-type(3) a").addClass("current");
}
If anyone could help me I’d really appreciate it.
cos the nth-of-type is not a valid jquery selector..
Eg.
$(".menu-main-menu-container li:nth-of-type(2) a").addClass("current");is invalid change it toYou can refer http://api.jquery.com/nth-child-selector/ or http://api.jquery.com/eq/ for docs