1

我试图弄清楚如何根据当前正在查看的页面动态激活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 Accordion 初始化：

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

因此，例如，如果您当前在/item4页面上，则应该展开 Heading #2 下的组。

编辑： 我发现似乎是一个很好的解决方案并将其发布为下面的答案，希望这会帮助有类似问题的人！

4

4 回答 4

0

如果每次页面点击都返回服务器（标准的非 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 返回最上面的元素。这仅在您只有一个具有“已选择”类的子元素时才有效，这应该是您的菜单的情况。

于 2013-04-08T05:17:06.943 回答
0

在为菜单上的活动标题处理一些 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方法来展开正确的部分。

于 2012-04-16T21:47:59.107 回答
0

要激活特定选项卡，您需要使用该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);

无论如何，我确信有更清洁和更有效的方法来做到这一点。

于 2012-04-16T21:31:33.493 回答
0

我用这段代码做到了：

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

网址看起来像 example.com/index.html#1

于 2013-04-08T05:22:04.340 回答