jQuery UI手风琴激活

Question

我不太清楚如何做这件事，也不确定我是否能做到。我有一个jQuery UI手风琴，其中包含多个部分，每个部分都包含多个锚点标签，每个标签都有唯一的字符串ID。

我想要实现手风琴打开到特定元素的位置，比如说id为"item117"的元素。我可以使用类似于

$('#accordion').activate('activate','#item117');

甚至可以

$('#accordion').activate('activate',117);

我试过那些方法和一些变化，但是不能让它工作。在我尝试让它工作的情况下，手风琴应该展开到第二节的末尾。

---

我仍然不明白这个问题，所以可能我还做错了其他事情。我已将其简化为一个示例页面：http://www.ofthejungle.com/testaccordion.php 请查看它和它的源代码。

- eflat

---

你是否正在使用最新的jQuery UI版本？我相信该函数以前是change而不是activate。 - Basic

请注意，这个问题是在2009年提出的。在查看答案时，请检查回复的日期以确定是否适用于您。 - eflat

Answer 1

来自文档:

// getter
var active = $( ".selector" ).accordion( "option", "active" );

// setter
$( ".selector" ).accordion( "option", "active", 2 );

- BTR

Answer 2

我已经研究了这个问题，找到了一个不错而且通用的解决方案
- 通过元素id 模拟点击 相应的标题

$('#header-of-item-258').click(); 

这个方法适用于任何时候和任何地方，不仅仅是手风琴。

- Peminator

---

我喜欢这个并将其用于各种奇怪的菜单需求。但是我喜欢尽可能使用内置功能。所以我已经给你和@BTR点赞 :) - Bradmage

Answer 3

对我来说有效的是

$("#accordion").accordion({active:"h3:last"})

- Laurentiu

Answer 4

您需要使用名为accordion的函数进行调用：

// Open the third set (zero based index)
$('#accordion').accordion('activate', 2); 

要打开包含特定元素的部分，您需要执行以下操作。注意：您需要针对通常打开和关闭部分的触发器进行目标定位。在文档中，这是一个h3元素，您的触发器元素可能不同，因此相应地进行更改。

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3'); 

- Doug Neiner

---

这个在jQuery UI API文档中有记录吗？ - CoryDorning

在jQuery UI 1.10.2中，我遇到了错误：“手风琴小部件实例没有这样的方法'activate'”。 - nnyby

我认为你的意思是“active”，而不是“activate”。 - ygesher

Answer 5

这个方法终于对我有用了：

$("#accordion").accordion("activate", $("#h3-id"));

注意!!! 在默认手风琴设置中，id 必须是您想要展开的 <h3> 元素的 id。

- Chuck Han

Answer 6

我遇到了与通过 #id 激活手风琴相同的问题。可惜我找不到解决办法，所以我创建了一个 hack。我通过迭代手风琴中的 div 元素来获取感兴趣的 div 的索引。它看起来像这样：

acc = 'tab-you-are-interested-in';

// find corresponding accordion
act = 0;
panels = $('#accordion-element > div');
for (i=0; i<panels.length; i++) {
    if ( panels[i].id == acc ) {
        act = i;  
    }
}

$('#accordion-element').accordion('activate', act);

- delphiak

---

正是我此刻正在寻找的！ - JonSnow

Answer 7

当您点击标题时，它是h3元素，并打开下一个div..这就是功能。现在，要激活，您需要提供索引或元素。索引可能与您的ID不同。所以我会使用：

$('.selector').accordion('option', 'activate', $(h3#id));

如果你有索引，你可以使用它。但是大多数情况下，如果你动态创建手风琴，很难获取id的索引。你可以像这样找到索引。

 var processingHeaders = $('#accordion h3');
 for (i = 0; i < processingHeaders.length; i++) {

        ids.push($(processingHeaders[i]).attr('id'));
        idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    }

现在我有了id... 使用 indexOf : 找到数组中的索引并使用它...

注意：// idsForLaterChecks 是全局变量

- nani

Answer 8

使用jQuery 1.9+后，以下内容：

$('#accordion').activate('activate', elementSelector);

is now:

$('#accordion').activate('option', 'active', elementSelector);

如果您更喜欢使用遍历方法，那么如果您有以下HTML内容：

<div id="accordion">
    <h3><a href="#">Section</a></h3>
    <div>
        <p id="#item117" class="item">
            <a class="link-active" href="">Item 117</a>
        </p>            
    </div>
</div>

try this:

var myh3 = $('#item117').parent().prev('h3');
$('#accordion').accordion('option', 'active', myh3);

- Jeremy Zerr

Answer 9

您也可以像这样启用和禁用手风琴：

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

重新激活该选项卡：

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

- Shib

---

这对我不起作用。类已添加，但手风琴没有反应。 - Mateng

Answer 10

尝试一下

$('#accordion').activate('#item117');

或者

$('#accordion').activate(document.getElementById('item117'));

激活手风琴的正确语法是

$(".selector").activate(var index)

其中 index 是字符串、元素、布尔值、数字或 JQuery。

- Prasanna Raghu