jQuery UI手风琴激活

Question

我没有得到如何做到这一点，或者如果我能做到这一点。我有一个jQuery UI Accordion，每个部分包含多个锚标签，每个部分都有一个唯一的字符串ID。

我希望能够将手风琴开放到具有给定ID的特定元素的位置。就像说id“item117”一样。我可以使用类似

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

甚至

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

我想这些有的变化，但不能让它去。在我尝试工作的情况下，手风琴应该已经打开到第二部分的末尾。

---

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

Answer 1

尝试

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

或

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

的正确语法用于激活手风琴是

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

其中索引是字符串，元素，布尔值，数量，JQuery的

Answer 2

你需要给它打电话使用称为accordion功能：

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

要打开包含特定元素的部分，你会做这样的事情。 注意：您需要定位通常打开并关闭该部分的触发器。在文档中这是一个h3元素，您的触发元素可能会有所不同，所以请相应地更改。

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

Answer 3

我在使用#id激活手风琴时遇到了同样的问题。可悲的是我没有找到办法，所以我创建了一个黑客。我通过手风琴中的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); 

Answer 4

这次终于为我工作：

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

注意！该ID必须是要打开的元素（在默认的手风琴设置中）的<h3>元素。

Answer 5

为我工作

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

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

Answer 7

已经超过这个太&发现很好，通用的解决方案
- 模拟点击所需项的头部通过其ID

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

的作品每次和任何地方不只是手风琴

Answer 8

当你点击标题，它是H3元素，并将其打开下div..that是功能性的。现在，对于激活，您需要提供索引或元素。索引可能与您的ID不同。所以我会用：

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

如果你有索引，则可以使用that..But大多数情况下，如果您创建动态的手风琴，这是不容易得到一个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是全球

Answer 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') 
}); 

Answer 10

Whatquery jQuery API

激活包含在手风琴中的第二个内容。

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

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

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

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

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

Answer 11

从技术文档：

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

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

Answer 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); 

Answer 13

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