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