We have a Jquery collapsing menu and we want the sublinks to stay visible when clicked and on the clicked page. There is a demo of it working here: http://thepixelforge.net/misc/wpc/Jacob/index.htm (only first two sub menus are functional). The same code added to template/common/header.tpl makes all the <dd> submenu links visible on our shop home page here: l o n d o n t s h i r t dot com? We need help stop them form being visible on the home page.
Also there is a problem with the jquery working in Firefox, I have tested in Chrome and Safari.
Code: Select all
<div id="nav"><!--// START NAV //-->
<h3 class="head">Tshirts & souvenirs</h3>
<dl id="nav">
<dt class="nav"><b>London Tshirts</b></dt>
<dd>
<ul>
<li><a href="/Unisex">Unisex</a></li>
<li><a href="/Slimfit">Slimfit</a></li>
<li><a href="/Kids">Kids</a></li>
</ul>
</dd>
<dt class="nav"><b>Alternative Tshirts</b></dt>
<dd>
<ul class="nav">
<li><a href="/England">England</a></li>
<li><a href="/Humour">Humour</a></li>
<li><a href="/Popular">Popular</a></li>
</ul>
</dd>
<dt class="nav"><b>Magnets</b></dt>
<dd>
<ul class="nav">
<li><a href="/magnets-ceramic">Ceramic</a></li>
<li><a href="/magnets-metal">Metal</a></li>
<li><a href="/magents-plastic">Plastic</a></li>
</ul>
</dd>
<dt class="nav"><b>Keyrings</b></dt>
<dd>
<ul class="nav">
<li><a href="/keyrings-ceramic">Ceramic</a></li>
<li><a href="/keyrings-metal">Metal</a></li>
<li><a href="/keyrings-plastic">Plastic</a></li>
</ul>
</dd>
<dt class="nav"><b>Other gifts</b></dt>
<dd>
<ul class="nav">
<li><a href="/Hats">Hats</a></li>
<li><a href="/Models">Models</a></li>
<li><a href="/Bags">Bags</a></li>
</ul>
</dd>
</dl>
</div><!--// END NAV //-->
Code: Select all
// This gets the last part of the url by stripping off the beginning and the trailing slash;
// l o n d o n t s h i r t dot com/England/ therefore becomes England:
var curPage = ((/[^/]+\/?$/.exec(window.location.pathname))[0]).replace(/\/$/, '');
$(document).ready(function(){
// This searches for an anchor whose href ends with the previous variable and adds a class for future use:
$('dd > ul li a[href$="'+curPage+'"]').addClass('current-page');
// This searches back up the hierarchy and searches for its ancestor dd and adds another class:
$('.current-page').closest('dd').addClass("current-section");
//This shows the active section
$('.current-section').show(function(){
// This adds a class to the bold tag of the related dt. The intention is that it will help
// integrate with the original script:
$(this).prev().children().addClass("clicked");
});
if($("#nav")) {
$("#nav dd").hide();
$("#nav dt.nav b").click(function() {
if(this.className.indexOf("clicked") != -1) {
$(this).parent().next().slideUp(200, function() {
// This is 'supposed' to hide the current section if another is clicked, but its not working and I'm stumped
$('.current-section').slideDown(200);
});
$(this).removeClass("clicked");
}else{
$("#nav dt.nav b").removeClass();
$(this).addClass("clicked");
$("#nav dd:visible").slideUp(200);
$(this).parent().next().slideDown(200, function() {
// This is 'supposed' to hide the current section if another is clicked, but its not working and I'm stumped
$('.current-section').slideUp(200);
});
}return false;
});
};
});
v1.4.9.1
Edit: took out live url.