jQuery Accordion - 打开页面加载的特定部分答案

【问题标题】：jQuery Accordion - open specific section on pageloadjQuery Accordion - 打开页面加载的特定部分
【发布时间】：2010-02-04 12:46:44
【问题描述】：

我在页面上有一个相当基本的 jQuery Accordion 实现（使用 1.3.2、jQuery UI Core 1.72 和 jQuery UI Accordion 1.7.2），我希望在页面加载时打开第二部分。我尝试了很多方法，但似乎没有任何效果......

头脚本：

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

手风琴：

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

任何帮助将不胜感激！

【问题讨论】：

不确定这是什么时间，但激活索引是从0开始的，所以对于这个问题，用户会使用active: 1

标签： javascript jquery accordion

【解决方案1】：

$("#accordion").accordion({ active: 2, event: "mouseover" });

应该做的伎俩！

更新

如果这不起作用，请尝试

$("#accordion").accordion({  event: "mouseover" }).activate(2);

（注意，这更新得更快了，感谢 cmets。老实说，它应该与 'active: 2' 参数一起使用，不知道为什么没有。）

【讨论】：

这只是导致手风琴打开两个部分！我错过了什么吗？
这很奇怪，手风琴不能一次打开多个项目！
我知道……它现在根本不起作用……javascript一定有问题；
更新工作，但关闭所有手风琴......！将索引修改为 0 并解决....非常感谢！
更新不是很慢吗？例如，您是第一次连接手风琴，然后再次运行整个事情以激活索引。此外，Darmen 的答案将是您创建后更快的方法，即：$('#accordion').accordion({ event: "mouseover"}).activate(2)

【解决方案2】：

打开特定标签的正确方法：

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

设置选项：

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

或者你可以使用这样的哈希：

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

如果您使用，请投票；)

谢谢

【讨论】：

【解决方案3】：

以下是否有效？

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});

【讨论】：

我喜欢这个答案，因为它演示了在稍微复杂的情况下的用法。

【解决方案4】：

试试

$("#accordion").activate(index);

【讨论】：

【解决方案5】：

我已经解决了这个问题有点不同，因为我必须创建一个 menu.php 我们包含我已经包含了每个页面。在我们的项目中，有 1 个手风琴（一个带有 2 个子菜单的菜单元素）。因此，当访问者在子菜单上时，手风琴打开并且选定的链接（使用 CSS，而不是 jQuery 突出显示）处于活动状态。但是当访问者在不同的页面上时，手风琴工作正常。

这里是javascript：

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

希望你喜欢。 =]

最好的问候！ =]

【讨论】：

【解决方案6】：

您应该写 active: 1 而不是 2，因为 Accordion 从 0 开始索引部分，而不是从 1 开始。工作代码将如下所示：

$("#accordion").accordion({ active: 1, event: "mouseover" });

希望对你有所帮助。

【讨论】：

【解决方案7】：

正如其他人所提到的，以下将使其在打开时处于活动状态：

$("#accordion").accordion({ active: 1 });

它是active:1，因为它是手风琴索引的第二个{0,1,2,...}; 其他答案似乎有些混乱，因为元素的内容包含字符“2”...

【讨论】：