javascript - 获取对 JQuery UI Accordion header 的引用

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

我有一个 JQuery Accordion ,如下所示;

<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").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

Accordion 加载正常。我正在努力实现两件事。

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

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

谢谢

最佳答案

当 Accordion 发生变化时,一个 jQuery 对象会包裹事件 header 的 <h3>元素传入 ui.newHeader ,所以你只需使用 find() :

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

更新了 fiddle here .

关于javascript - 获取对 JQuery UI Accordion header 的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6545345/

相关文章:

javascript - 如何通过 ajax 加载样式表并在加载完成后进行回调

javascript - 将可调整大小的子项保留在父项中

jQuery UI 选项卡在加载时不隐藏非事件选项卡

javascript - 使用jquery更改父div中的元素位置

jquery - 单击/激活 jQuery UI 选项卡时触发函数?

javascript - jquery fadeTo() 滚动时,向下时淡出但在返回时不淡入

javascript - 如何在 PhantomJS 中滚动以触发延迟加载?

javascript - 简单的 Ember.js `has-many` 关系不起作用

javascript - 未处理的PromiseRejection警告: undefined in Mongoose

jquery ui 选项卡 : get width of nested tabs on creation