获取对 JQuery UI Accordion Header 的引用答案

【问题标题】：Get reference to a JQuery UI Accordion Header获取对 JQuery UI Accordion Header 的引用
【发布时间】：2012-07-11 03:53:03
【问题描述】：

我有一个如下的 JQuery 手风琴；

<div id="accordion">
 <h3 class="ui-accordion-header"><a id="link1" href="#">First Header</a></h3>
  <div id="div1">First Content</div>
 <h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
  <div id="div2">Second Content</div>
</div>

手风琴是这样生成的：

$("#accordion").accordion({
  collapsible:true,
  active:false,
  navigation:true,
  autoHeight:false,
  change:function(event, ui){
    var index = $(this).find("h3").index(ui.newHeader[0]);
    var header = $(this).find("h3")[index].find("a"); //<--- problem line
    var currentHeaderID = (header.attr("id")); //<--id that I need
  }
});

JSFiddle Link

手风琴加载正常。我正在努力实现两件事。

1- 获取刚刚打开的标头标签内的 href 元素的 ID（即 ids link1 和 link2）。上面更改事件中的代码给了我标题的索引。但我正在努力让下一行 (var header = ....) 正常工作。你能做到吗

2- 已解决 当用户单击已打开的标题时，该部分将关闭，因此实际上所有部分都已关闭。我不确定如何实现这一目标。你能帮忙吗？

谢谢

【问题讨论】：

#2 是您使用collapisble: true时的默认行为
当header1 打开并单击header2 时，header1 将关闭，header2 将打开。然而我想要的是当header1被打开并且你再次点击header1，然后header1被关闭。目前不会发生这种情况。
是的，如果您设置了可折叠设置，它应该可以这样工作：jqueryui.com/demos/accordion/#collapsible 它现在无法正常工作，因为您拼错了选项 collapsible 而不是 collapsable
是的，谢谢。折叠正在起作用。
Sivakanesh，您知道 ID 区分大小写并且不能以“数字”开头吗？使用类似 id="link1" id="link2" ...etc.

标签： javascript jquery jquery-ui jquery-ui-accordion

【解决方案1】：

当手风琴发生变化时，会在ui.newHeader 中传递一个包裹活动标头的<h3> 元素的jQuery 对象，因此您只需使用find()：

var currentHeaderID = ui.newHeader.find("a").attr("id");

更新了小提琴here。

【讨论】：

这是我的一天。