激活jQuery UI手風琴菜單中的當前內容部分

Question

我想知道如何根據當前正在查看的頁面動態激活jQuery UI Accordion菜單的正確內容部分。我已經進行了大量搜索，過去似乎其他人也遇到過這方面的問題，但我還沒有找到適合我的解決方案。我知道active可以設置爲打開菜單的某個索引，但我需要動態地執行此操作。

我在想我可以使用activate方法實現我想要的，我似乎無法弄清楚。我想遠離設置Cookie，因爲通常不會使用後退/前進按鈕以及通過特定網址直接導航。有人有主意嗎？提前致謝！

這裏是我的菜單的簡化結構：

<div id="menu"> 
    <div id="sections"> 
     <div class="grouping accordion"> 
      <a id="heading1" href="#">Heading #1</a> 
      <div class="sub-items"> 
       <a href="/item1">Item #1</a> 
       <br /> 
       <a href="/item2">Item #2</a> 
      </div> 
     </div> 
     <div class="grouping accordion"> 
      <a id="heading2" href="#">Heading #2</a> 
      <div class="sub-items"> 
       <a href="/item4">Item #4</a> 
       <br /> 
       <a href="/item5">Item #6</a> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是我的jQuery手風琴初始化：

$('#sections').accordion({ 
    header: '> .accordion > a', 
    autoHeight: false, 
    collapsible: true, 
    active: false, 
    animated: 'slide' 
}); 

所以，如果你目前/item4頁例如上，下組標題＃2應該擴大。

編輯： 我發現什麼似乎是一個很好的解決方案，併發布作爲下面的答案，希望這會幫助有類似問題的人！

Answer 1

在爲菜單上的活動標題使用一些CSS時，我偶然發現了一個非常乾淨而簡單的解決方案。看起來我可能已經推翻了一些東西！

使用相同的HTML中的問題，下面是爲我工作的JavaScript的：

//accordion menu 
$('#sections').accordion({ 
    header: '> .accordion > a', 
    autoHeight: false, 
    collapsible: true, 
    active: '.selected', 
    animated: 'slide' 
}); 

//add currentPage class to current menu item based on url 
var url = window.location.href; 
url = url.substr(url.lastIndexOf("/") + 1); 
$("#sections").find("a[href='" + url + "']").addClass("currentPage"); 

//get id of header anchor tag 
var headerId = $(".currentPage").parents(".accordion").children("a").attr("id"); 

//check if headerId is set, if so activate that id 
if (headerId) { 
    $('#sections').accordion('option', 'animated', false); 
    $('#sections').accordion('activate', $('#' + headerId)); 
    $('#sections').accordion('option', 'animated', 'slide'); 
} 

該解決方案是非常簡單的，它從URL中獲取的當前頁面，並確定它的每一個環節手風琴菜單。如果它找到一個匹配項，它會給這個鏈接一個currentPage類（這允許我們通過css相應地設置該鏈接的樣式）。然後，它查找該鏈接的父級，其類別爲.accordion，找到第一個子鏈接（手風琴標題）並抓取標題的ID。假設已找到標題ID，我們可以使用activate方法展開正確的部分。

Answer 2

要激活特定選項卡，您需要使用accordion('activate', index)方法。例如：

$("#sections").accordion('activate', 2); 

但是，您將需要一些定義每個頁面的索引鍵。你甚至可以動態地生成它。通過你的標題

Pages = { 
    "heading1" : { 
     "id": 1, 
     "is_active": false, 
     "items": { 
      "item1": { 
       "href": "item1", 
       "name": "Item #1" 
      }, 
      "item2": { 
       "href": "item2", 
       "name": "Item #2" 
      } 
     } 
    }, 

    "heading2" : { 
     /* etc*/  
    }, 

} 

隨着一些hackish的jQuery的魔力，可以循環

var active_heading_index = null; 

$.each(Pages, function(heading) { 
    $.each(heading.items, function(item) { 
     if($(location).attr('href') == item.href) { 
      heading.is_active = true; 
      // or 
      active_heading_index = heading.id 
     } 
    }); 
}); 

if(active_heading_index) $("#sections").accordion('activate', active_heading_index); 

無論如何，我敢肯定有做的更清潔，更高效的方法：我可能會創建一個頁面對象。

Answer 3

如果您要返回服務器進行每次頁面單擊（標準非Ajaxy方式），則服務器可以將「選定」類添加到適當的節點。所以你可以在客戶端取回類似的東西（我只寫了基本代碼，跳過了大部分標籤）。

<ul id="menu"> 
    <li> 
    <ul> 
     <li> 
     </li> 
     <li class="selected"> 
     <a href="">Menu 102</a> 
     </li> 
    <ul> 
    </li> 
    <li> 
    ... 
    </li> 
<ul> 

然後，只需找到適當的索引給予手風琴的activate屬性。

$(document).ready(function() { 
    var index = $("li.selected").parents("li").last().index(); 
    $("#menu").accordion({ 
     active: index, 
     collapsible: true 
    }); 
}); 

parents("li").last() jQuery返回最頂端的元素。這隻適用於如果你只有一個子類型爲「selected」的子元素，這應該是你的菜單的情況。

Answer 4

我沒有使用此代碼是：

var newsNum = parseInt(window.location.hash.slice(1)); 
$(document).ready(function(){ 
    $("#menu").accordion('activate', newsNum); 
}); 

和URL看起來像example.com/index.html#1