jQuery的手风琴菜单

Question

下一页

我在页面左侧的垂直堆叠的手风琴式菜单上打开。它可以工作，但我不认为它对用户来说非常直观，所以我想改进它。

的HTML是

<ul class="leftnav"> 
    <li><a href="#">South of France</a> 
    <ul> 
     <li><a href="/hotels.php?tag=South of France">South of France</a></li> 
     <li><a href="/hotels.php?tag=Provence">Provence</a></li> 
     <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li> 
    </ul> 
    </li> 
    <li><a href="#">South-West France</a> 
    <ul> 
etc 

和JavaScript是

$('.leftnav > li > a').click(function(){ 
     $(this).next().slideToggle(1200); 
    }); 

用户必须点击“法国南部”菜单按钮，打开手风琴，然后点击再次第二级菜单到达所需的页面。如果他（比如说）在“巴黎”页面上，他点击“法国南部”，但仍然在巴黎页面上发现自己。

我想它是这样工作的： 点击“法国南部”菜单按钮 手风琴打开 法国南部页面，然后打开后，仍然与手风琴开放，如果用户想要缩小

然后进一步搜索他可以点击普罗旺斯或朗格多克。

我曾尝试过各种事情的document.getElementById（ '南'）点击（）。等等，但没有达到我想要得到的东西。

编辑 我试图按照Blowski的建议，但没有成功。看起来很合理，但我显然做的不对。

我现在有这对我的HTML

<ul class="leftnav"> 
    <li><a href="/hotels.php?tag=South of France">South of France</a> 
    <ul> 
     <li><a href="/hotels.php?tag=Provence">Provence</a></li> 
     <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li> 
    </ul> 
    </li> 
    <li><a href="#">South-West France</a> 
    <ul> 
etc 

这对于JavaScript的

$('.leftnav > li > a').click(function(){ 
     $(this).next().slideToggle(1200); 
     $(this).addClass('open'); 
    }); 
    if ($('.leftnav > li > a').attr('class') == 'open'){ 
     $(this).next().slideDown(1200); 
    }; 

第二个编辑 通过EdenSource提供的解决方案与一点点修改工作（谢谢！）。 随着溶液上现有的菜单作为第一第二级上的相同的URL参数依赖，我不得不包括它，然后用显示隐藏：无。

<ul class="leftnav"> 
    <li><a href="/hotels.php?tag=South of France">South of France</a> 
    <ul> 
     <li style="display:none"><a href="tag=South of France"></a></li> 
     <li><a href="/hotels.php?tag=Provence">Provence</a></li> 
     <li><a href="/hotels.php?tag=Provence">Cote d'Azure</a></li> 
     <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li> 
    </ul> 
etc 

我也不得不把JavaScript中的变量减少到参数的值。我用split（）和pop（）做了这个。

var param = window.location.search.substr(1).split('='); 
param = param.pop(); 
param = param.replace(/%20/g, " "); 

$(".leftnav li ul li a").each(function(){ 
    var getHref = $(this).attr("href").split('='); 
    getHref = getHref.pop(); 
    if(getHref == param){ 
     $(this).addClass("subActiv"); 
     $(this).closest("ul").slideDown(1200).closest("li").children().first().addClass("navActiv");  
    } 
}); 

唯一的问题是现在的了slideDown是相当生涩，但我知道这是一个普遍的问题，有几十个关于它的线程。希望其中的一个能为我带来解决方案。

Answer 1

你可以尝试，以确定哪些子菜单页是我们的感谢href attribut：

var myUrl = document.location.pathname; 

$(document).on("click", ".leftnav > li", function(){ 
    $("ul", this).slideToggle(500); 
}); 

$(".leftnav li ul li a").each(function(){ 
    var getHref = $(this).attr("href"); 

    if(getHref == myUrl){ 
     $(this).addClass("subActiv"); 
     $(this).closest("ul").slideToggle(500).closest("li").children().first().addClass("navActiv");  
    } 
}); 

Live Demo

在小提琴，我强迫网址等于"/hotels.php?tag=Languedoc"

Answer 2

添加类手风琴开放的标签，并且或者设置在服务器端这个类生成的代码，或者做一些在JavaScript页面加载时。