I am using jQuery and jQuery-UI to make a navigation menu for a project I am working on and am having a strange issue with the jQuery animation in Internet Explorer. The code finds a tag that is nested i na specific order (li ul li a OR li ul li h3) and adds a class to the tag, which is used to toggle the content visibility. The jQuery code I am using can be seen here:
(function ($) {
$.fn.menuLocator = function (options1) {
var defaults = {
};
var options = $.extend(defaults, options1);
return this.each(function () {
var menu = this;
var basePath = window.location.href.split(window.location.host)[1];
var paths = basePath.split('.html').join('').split('/');
for (var i = 1; i != paths.length; i++) {
$(menu).find('a[href$="' + paths[i] + '"]').addClass('active').addClass('level_' + i).parent().find('ul:first').addClass('active');
$('a.active').find('.has_children:first').addClass('open');
}
$(menu).find('li ul').parent().find('a:first').append('<span class="has_children"><span class="icon"></span></span>');
for (var i = 1; i != paths.length; i++) {
$(menu).find('a[href$="' + paths[i] + '"]').addClass('active').addClass('level_' + i).parent().find('li h3').addClass('active');
$('h3.active').find('.has_children').addClass('open');
}
$(menu).find('li ul').parent().find('h3').append('<span class="has_children"><span class="icon"></span></span>');
$(menu).find('.has_children').toggle(
function () {
var is_old_ie = false;
var speed = 200;
if($.browser.msie){
is_old_ie = true;
}
if(is_old_ie){
speed = 1;
}
$(this).parent().parent().addClass('active');
$(this).parent().next('ul').slideToggle(speed);
$(this).toggleClass('open');
},
function () {
var is_old_ie = false;
var speed = 200;
if($.browser.msie){
is_old_ie = true;
}
if(is_old_ie){
speed = 1;
}
$(this).prevAll(":has(.active):first").removeClass('active');
$(this).parent().next('ul').slideToggle(speed);
$(this).toggleClass('open');
});
});
};
}(jQuery));
In Chrome, Firefox, Safari and Opera, everything works fine. But in IE (7, 8, 9) I get the following bug:
The navigation displays fine initially:
When a user clicks the icons, each section expands to show sub-navigation:
However, when you close the section immediately above an open section, the content does not shift up to match the menu.
If you open and close the section above, it will continue to push content down, but won’t push it up.
Closing and re-opening a sub-menu will cause the content to reset. Opening items in the sub-menus cause the content to shift down and up as expected.
The menu is created using the following HTML:
<!-- Left zone -->
<div class = "zoneLeft" style = "float: left;" >
<div class = "leftColumn" >
<ul class = "menu" >
<li>
<a> In This Section < /a>
<ul id="menuElem">
<li><a href="/Legal / Sunshine - Laws / Open - Government / Your - Rights - to - an - Open - and - Accountable - Government " >Your Rights to an Open and Accountable Government</a></li>
</ul>
</li>
<li>
<a>Related</a>
<ul>
<li><a href=" / About - AG / Contact ">Contact</a></li><li><a href=" / Legal / Sunshine - Laws / Sign - Up - For - Updates - to - ohio - s - Sunshine - Laws ">Sign Up For Updates to Ohio's Sunshine Laws</a></li>
<li><a href=" / FAQ / Sunshine - laws - FAQs ">Sunshine Laws FAQs</a></li><li><a href=" / Legal / Sunshine - Laws / Sunshine - Laws - Publication - Request - Form ">Sunshine Laws Publication Request Form</a></li>
<li><a href=" / Legal / Sunshine - Laws / Sunshine - Law - Training ">Sunshine Laws Training</a></li>
</ul>
</li>
<li>
<a>Publications</a>
<ul id="p_lt_zoneContent_pageplaceholder1_pageplaceholder1_lt_zoneLeft_TagDisplayPublications_BListTagged " class="subCMSListMenuUL ">
<li><a href=" / Files / Publications / Publications -for -Legal / Sunshine - Laws / 2012 - Sunshine - Laws - Manual.aspx ">2012 Sunshine Laws Manual</a></li>
<li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - A - % e2 % 80 % 93 - Statutes - Public - Records, - Open - Meeting.aspx ">Appendix A – Statutes: Public Records, Open Meetings & Personal Information Systems Act</a></li>
<li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - B - % e2 % 80 % 93 - Statutory - Excepting - Records - from - the.aspx">Appendix B – Statutory Excepting Records from the Ohio Public Records Act or Declaring Records</a></li>
<li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - C - % e2 % 80 % 93 - Ohio - Attorney - General - Opinions - Interp.aspx ">Appendix C – Ohio Attorney General Opinions Interpreting Ohio’s Public Records Act</a></li>
<li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - D - % e2 % 80 % 93 - Ohio - Attorney - General - Opinions - Interp.aspx ">Appendix D – Ohio Attorney General Opinions Interpreting Ohio’s Open Meetings Act</a></li>
<li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Model - Public - Records - Policy.aspx ">Model Public Records Policy</a></li>
</ul>
</li>
</ul>
</div>
</div>
Any ideas are appreciated. Thanks!
Before I post my solution to this problem, let me preface it by saying that I am aware that this is a terrible way of fixing this bug. The issue only occurs on a couple pages, and we have decided to fix it in post-production. Hopefully this will not be the final solution.
That being said, I fixed the animation issue by triggering click events when a panel is closed. Since the content in a panel resets when it is closed and re-opened, I used the following code to trigger two click events (close/re-open) on each section following the active section. In IE, the animation duration is set to 0 ms anyways, so this content reset is not visible to the user. Additionally, there is a minimal performance loss, since if the panels are open the content has already been rendered and does not need to be reloaded.