jQuery手風琴菜單 - 保持手風琴菜單打開頁面我在

我希望你能幫到你。我對jQuery非常陌生，正在爲我的側面導航工作5或6級的手風琴菜單。我從Dane Peterson @ daneomatic.com獲得了大部分代碼（感謝Dane！）。但是，我卡上了一兩件事：jQuery手風琴菜單 - 保持手風琴菜單打開頁面我在

我希望有我的手風琴/樹的工作是這樣的：

，當我瀏覽下來到，比方說三個級別，並點擊鏈接打開鏈接到該級別的頁面，如果我在該頁面上加載第三級頁面，我該如何指示？另外，當我加載頁面時，如何保持樹打開到該級別？

我想我問的是：手風琴/樹是否有自動更新的方式來顯示你在哪個頁面，並讓該樹打開到那個級別？

在此先感謝！

來源

2009-10-21 MelissaTA

這是JavaScript導航網站的缺陷之一 - 您的網址實際上並未指向您的網頁，就像傳統網頁一樣。這使得使用普通瀏覽器功能（如書籤和後退按鈕）變得很困難。

有些人似乎現在使用的一種解決方案是將這些信息存儲在url的哈希部分之後。

http://www.mysite.com/path/index.html#jsPageIndicator

通過上面的地方「jsPageIndicator」的存儲信息，然後你可以使用JavaScript解析之後$（文件）。就緒（），並將它告訴你應該加載的頁面。在你的情況下，這可能是簡單的，比如手風琴的索引有重點（應該是開放的）。

你可能也想看看jQuery history plugin.

或者，亞歷克斯低於所指出的，benalman.com/projects/jquery-bbq-plugin

來源

2009-10-21 19:42:15 Matt

如果你使用這裏描述的哈希改變方法，下面的插件是不匹配的：http://benalman.com/projects/jquery-bbq-plugin/ - 它很快將取代jQuery歷史插件，這是非常過時的。 – 2009-10-21 19:45:24

@亞歷山大 - 不錯！並沒有意識到這一點。 – Matt 2009-10-21 19:51:34

感謝您的信息 - 我會看看，如果我能得到它與您的解決方案或從沒有驚喜（上圖） - 手指交叉工作！ – MelissaTA 2009-10-23 17:49:24

爲了得到手風琴自動打開基於URL的正確部分，你會開始使navigation選項的東西，如：

$('#accordion').accordion('option', 'navigation', true);

默認情況下，此選項查找具有該URL fragme相匹配的href手風琴標題鏈接nt（如果您的URL是http://somesite.com/about#contact，＃contact是片段）並打開該標題鏈接的部分。由於您使用的手風琴導航到不同的頁面，你可能不會有URL片段來匹配，所以你必須編寫自定義navigationFilter：

$('#accordion').accordion('option', 'navigationFilter', function(){ ... });

可以使用navigationFilter選項覆蓋手風琴插件如何匹配當前頁面的URL的標題鏈接。

到目前爲止，我們已經根據當前頁面打開了手風琴的右側部分。接下來，我們需要突出顯示該部分對應於該頁面的鏈接。你會做的東西，如：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#accordion li').each(function() { 
     var li = $(this); 
     var a = $('a', li); 
     if(/* compare the href of the 'a' element to the current URL */) { 
     li.addClass('active'); 
     } 
    }); 
    }); 
</script> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
    <ul> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
    <ul> 
     <li><a href="/help">Help</a></li> 
     <li><a href="/faq">FAQ</a></li> 
    </ul> 
    </div> 
</div>

在這裏，我們正在經歷導航手風琴的所有網頁鏈接，採摘，當前URL匹配的一個，並應用.active類吧，你然後可以使用不同的CSS樣式。

旁白：另一個，可能會更好，方式來完成第二部分是建立與已經應用到合適的鏈接.active類的頁面，但假定你可以控制後臺和你知道該怎麼做。事實上，如果是這樣的話，您可以跳過整個navigationFilter的東西，並生成一個<script>塊來設置手風琴上的active選項以打開正確的部分。

來源

2009-10-21 19:52:35

謝謝，我會嘗試這些解決方案。星期五快樂！ – MelissaTA 2009-10-23 17:47:50

你可以在這裏看到：http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

來源

2010-02-06 13:50:09 MacBee

以上都不爲我工作。 jquery ui的文檔是多餘的，源代碼沒有留下許多不熟悉jquery的人的線索。

我在邊欄中使用了手風琴，每個內容部分的鏈接都在表格內，所以我必須跟蹤我的HTML結構（一個脆弱的東西），並在創建手風琴之後立即執行此操作：

 $("#sidebar td").each(function() { 
      var td = $(this); 
      var a = td[0].firstChild; 
      if (a.href == location.href) { 
       $("#sidebar").accordion("activate", 
         td.parent().parent().parent().parent().prev()); 
      } 
     });

是的，可怕的，備份TR，TBODY，表，格，但它的工作，並在我們的例子中，我們已經好幾個月改變了HTML的結構。

來源

2010-03-23 09:10:32

這裏是爲我工作的例子：

Need help with jQuery UI Accordion navigationFilter option

來源

2010-04-23 23:19:04 jslatts

確定這個問題一直纏着我了一會兒，以爲我會後我的解決這個問題。（我有點用JQuery的新手，所以......）

在我的情況下，我有一個母版頁，其中包含JQuery腳本來處理菜單的自動化，我有幾個內容頁有不同的菜單（我有一個水平菜單橫跨頁眉，然後JQuery手風琴處理子菜單可以這麼說）。

我將id標籤添加到菜單頭div中，然後將以下內容放置在內容頁面的內容佔位符中。

$(document).ready(function() { 
     $('.active').next().hide().removeClass('active'); 
     $('#yourMenuHeaderIdTag).addClass('active').next().show(); 
    };

這完美的作品，它的確讓我不知道爲什麼我有這個掙扎在過去一週左右的時候解決方案就是這麼簡單！

來源

2011-12-29 23:51:06

jQuery手風琴菜單 - 保持手風琴菜單打開頁面我在

回答

相關問題