Hi gang, I’m hoping someone can advise me about tweaking some JavaScript to work with IE7. To begin, I can’t write JavaScript from scratch and am not an experienced coder. I am using a JavaScript project that someone posted online and trying to tweak it to fit my situation; I cannot understand much beyond some rudimentary discussion on the topic. You can very easily and very quicky talk over my head. This project works on my site (and in the original project online) when using IE8+ and any other compliant browser; just not IE7. The project is a navigation menu where each top-level item slides open and closed to reveal the menu items. It uses a basic list with classes as indicated:
<ul id="slidenav">
<li class="nitem"><a href="#">Our Band</a></li>
<ul class="nsub">
<li><a href="about.php">About Us</a></li>
<li><a href="gallery.php">Galleries</a></li>
</ul>
<li class="nitem"><a href="#">Explore</a></li>
<ul class="nsub">
<li><a href="cushy/calendar.php">Appearances</a></li>
<li><a href="music/music.php">Listen</a></li>
<li><a href="#">Our Merchandise</a></li>
</ul>
</ul><!-- slidenav -->
The JavaScript involved is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('.nsub').hide(); // hide sub-navigation items by default
$('.nitem a').live('click', function(e){
e.preventDefault();
$(this).parent().next('.nsub').slideToggle('slow');
if($(this).parent().next('.nsub').is(':hidden')) {
$(this).addClass("CurrentlySelected");
} else {
$(this).removeClass("CurrentlySelected");
}
});
});
</script>
Like I said, works beautifully in compliant browsers. In IE7 the top-level items won’t slide open to reveal the sub-items. Please check my “sandbox” version of a site I’m putting together here to see the menu in action:
http://www.steampoweredweb.com/patchwork-test
Use IE8+ and anything non-IE and the menu will work. Try it in IE7 and you’ll see it doesn’t work. Thanks in advance for the help!
Paul