jQuery UI 手风琴激活答案

【问题标题】：jQuery UI Accordion activatejQuery UI 手风琴激活
【发布时间】：2010-12-26 08:07:54
【问题描述】：

我不知道如何做到这一点，或者我是否可以做到这一点。我有一个 jQuery UI Accordion，多个部分，每个部分包含多个锚标签，每个标签都有一个唯一的字符串 id。

我希望能够将手风琴打开到具有给定 id 的特定元素所在的位置。就像说 id "item117"。我可以使用类似的东西

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

甚至

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

我已经尝试了这些和一些变化，但无法实现。在我尝试开始工作的情况下，手风琴应该已经打开到第二部分的末尾。

我仍然没有得到这个，所以也许我做错了什么。我已将其简化为此处的示例页面：http://www.ofthejungle.com/testaccordion.php 请查看它及其来源。

【问题讨论】：

您使用的是最新的 jQuery ui 版本吗？我相信该功能曾经是change 而不是activate
请注意，这个问题是在 2009 年提出的。查看答案时，请检查回复的日期，看看它是否及时。

标签： jquery accordion jquery-ui-accordion

【解决方案1】：

试试

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

或

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

激活手风琴的正确语法是

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

其中索引为字符串、元素、布尔值、数字、JQuery

【讨论】：

【解决方案2】：

你需要使用名为accordion的函数来调用它：

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

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

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

【讨论】：

这是否记录在任何地方的 jQuery UI API 中？
在 jQuery UI 1.10.2 中出现错误：no such method 'activate' for accordion widget instance
我认为你的意思是激活，而不是激活。

【解决方案3】：

我在使用#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);

【讨论】：

正是我正在寻找的这一刻！

【解决方案4】：

这终于为我工作了：

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

注意！！！ id 必须是您要打开的

元素的 id（在默认手风琴设置中）。

【讨论】：

【解决方案5】：

为我工作

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

【讨论】：

【解决方案6】：

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

// 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");

【讨论】：

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

【解决方案7】：

也已经解决了这个问题并找到了很好的通用解决方案
- 模拟点击所需项目的标题，按其 id

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

不只是手风琴，随时随地都可以使用

【讨论】：

我喜欢这个并将它用于各种奇怪的菜单需求。但我喜欢尽可能使用内置功能。所以我 +1 你和@BTR :)

【解决方案8】：

当您单击标题时，它是 h3 元素，它会打开下一个 div..这是功能。现在，对于 activate ，您需要提供索引或元素。 index 可能与您的 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')); 
    }

现在我得到了 ids.. using indexOf ：在数组中找到索引并使用它..

注意：// idsForLaterChecks 是全局的

【讨论】：

【解决方案9】：

这是另一种方式。

在手风琴的每个 H3 标头标签中都包含一个 ID="someId"，并将该 ID 命名为唯一的。

例如，此 id 将在系列“AccjA”中，下一个 h4 将是“AccjB”：

<h4 class="Accj" id="AccjA">
       <a href="#settings">A Fan?</a>
</h4>

然后激活您希望使用的任何面板：

    $('#Accjoin').accordion('activate', '#AccjoinA')

在页面加载延迟 2 秒后，我使用了上述超时来吸引用户的注意力，使用 Ben Alman 的“.doTimeout”函数，例如：

$.doTimeout(2000, function () {
    $('#Accjoin').accordion('activate', '#AccjoinA')
});

【讨论】：

以上内容现在不适用于 1.9。就像 Jeremy Zerr 现在指出的那样。 jQuery 1.9.+ 有不同的设置器！！ api.jqueryui.com/accordion/#option-active

【解决方案10】：

jquery API 是什么

激活 Accordion 中包含的第二个内容。

$(".selector").activate(1)

关闭手风琴的所有内容部分。

$(".selector").activate(false)

激活匹配给定表达式的第一个元素。

$(".selector").activate("a:first")

【讨论】：

【解决方案11】：

来自文档：

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

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

【讨论】：

【解决方案12】：

使用 jQuery 1.9+：

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

现在：

$('#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>

试试这个：

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

【讨论】：

【解决方案13】：

$('#collapseOne').collapse('toggle');

【讨论】：