![](/img/trans.png)
[英]Working with jQuery UI “Accordion and Droppable” Part 2
[英]Activate Current Content Part in jQuery UI Accordion Menu
我试图弄清楚如何根据当前正在查看的页面动态激活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下的组应被展开。
编辑:我发现什么似乎是一个很好的解决方案,并将其发布为下面的答案,希望这将对遇到类似问题的人有所帮助!
要激活特定的选项卡,您将要使用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);
无论如何,我敢肯定有更清洁,更有效的方法。
在为菜单上的活动标题使用一些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
方法扩展正确的部分。
如果每次单击页面都返回服务器(标准的非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”类的子元素时才有效,这对于菜单来说就是这种情况。
我是使用以下代码完成的:
var newsNum = parseInt(window.location.hash.slice(1));
$(document).ready(function(){
$("#menu").accordion('activate', newsNum );
});
网址看起来像example.com/index.html#1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.