jQuery的手風琴菜單

我在頁面左側的垂直堆疊的手風琴式菜單上打開。它可以工作，但我不認爲它對用戶來說非常直觀，所以我想改進它。jQuery的手風琴菜單

的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是相當生澀，但我知道這是一個普遍的問題，有幾十個關於它的線程。希望其中的一個能爲我帶來解決方案。

來源

2015-04-02 TrapezeArtist

你可以嘗試，以確定哪些子菜單頁是我們的感謝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"

來源

2015-04-02 13:45:27 EdenSource

這工作，有一些修改。看到我的第二個編輯。 – TrapezeArtist 2015-04-02 15:04:08

添加類手風琴開放的標籤，並且或者設置在服務器端這個類生成的代碼，或者做一些在JavaScript頁面加載時。

來源

2015-04-02 12:25:29

謝謝Blowski。這似乎是合理的，但我還沒有破解它。看看我對原帖的編輯，看看我是如何試圖遵循你的建議。 – TrapezeArtist 2015-04-02 13:05:52

jQuery的手風琴菜單

回答

相關問題