在jQuery UI手風琴菜單中激活當前內容部件

Question

我試圖弄清楚如何根據當前正在查看的頁面動態激活jQuery UI Accordion菜單的正確內容部分。 我已經進行了廣泛的搜索，似乎過去其他人對此有疑問，但是我還沒有找到適合我的解決方案。 我知道可以將active設置為打開菜單的某個索引，但是我需要動態地執行此操作。

我在想我可以使用activate方法實現我想要的，只是似乎無法弄清楚。 我想避免設置Cookie，因為通常無法通過后退/前進按鈕和通過特定URL的直接導航來工作。 有人有想法么？ 提前致謝！

這是菜單的簡化結構：

<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

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

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

但是，您將需要一些定義每頁索引鍵的內容。 您甚至可以動態生成它。 我可能會創建一個Pages對象：

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

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

}

有了一些駭人聽聞的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 2

在為菜單上的活動標題使用一些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 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
    });
});

jQuery的Parents parents("li").last()返回最上面的元素。 僅當您只有一個帶有“ selected”類的子元素時才有效，這對於菜單來說就是這種情況。

Answer 4

我是使用以下代碼完成的：

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

網址看起來像example.com/index.html#1