jQuery UI 手风琴激活

jQuery UI Accordion activate

提问by eflat

I'm not getting how to do this, or if I can do this. I have a jQuery UI Accordion, multiple sections with each section containing multiple anchor tags each with a unique string id.

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

I'd like to be able to have the accordion open to where a particular element with a given id is. Like say id "item117". Can I use something like

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

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

or even

甚至

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

I've tried those and some variations but can't get it to go. In the case I was trying to get working, the accordion should've opened to the end of the second section.

我已经尝试过这些和一些变体，但无法实现。如果我想开始工作，手风琴应该已经打开到第二部分的结尾。

---

---

I'm still not getting this, so maybe I'm doing something else wrong as well. I've stripped it down to an example page here: http://www.ofthejungle.com/testaccordion.phpPlease have a look at it and its source.

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

回答by Peminator

have been over this too & found nice and universal solution
- emulate clickingthe header of required item by its id

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

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

that works everytime and anywhere not just accordion

随时随地工作，不仅仅是手风琴

回答by BTR

From documentation:

从文档：

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

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

回答by Laurentiu

for me worked

为我工作

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

回答by Doug Neiner

You need to call it using the function called accordion:

您需要使用以下函数调用它accordion：

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

To open a section containing a specific element, you would do something like this. Note: you need to target the trigger that normally opens and closes the section. In the docs this is an h3element, your trigger element may be different, so change this accordingly.

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

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

回答by Chuck Han

This FINALLY worked for me:

这最终对我有用：

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

NOTE!!! The id has to be that of the <h3> element you want to open up (in the default accordion setup).

笔记！！！id 必须是您要打开的 <h3> 元素的 ID（在默认的手风琴设置中）。

回答by delphiak

I had the same problem with activating an accordion with #id. Sadly I hadn't found a way to this, so I've created a hack. I iterate through divelements in my accordion in order to get the index of interesting div. It looks like this:

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

回答by nani

When you click on header, it is h3 element and it opens the next div..that is functionality. Now, For activate , you need to provide index or the element. index might be different than your id. so i would use :

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

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

If you have index, you can use that..But most of the cases , if you created accordion dynamically, it is not easy to get index of an id. You can find indices like this..

如果你有索引，你可以使用它......但大多数情况下，如果你动态创建手风琴，获取一个 id 的索引并不容易。你可以找到这样的索引..

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

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

now i got ids.. using indexOf : find the index in the array and use it..

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

Note: // idsForLaterChecks is global

注意：// idsForLaterChecks 是全局的

回答by Jeremy Zerr

With jQuery 1.9+ the:

使用 jQuery 1.9+：

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

is now:

就是现在：

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

If you find it easier to use traversing methods, if you have HTML like this:

如果你发现使用遍历方法更容易，如果你有这样的 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);

回答by Shib

You can also enable and disable the accordion like this:

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

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

To reactivate the tab:

要重新激活选项卡：

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

回答by Martin Sansone - MiOEE

Here's another way.

这是另一种方式。

Include an ID="someId" in just each of the H3 header tags of the accordion and name the id's unique.

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

For example this id would be in series 'AccjA' the next h4 would be 'AccjB':

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

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

Then activate whichever panel you wish with:

然后激活您想要的任何面板：

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

I've used the above on a timeout to catch the attention of the user after the page is loaded with a 2 second delay using Ben Alman's ".doTimeout" function like:

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

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