更新的解决方案:
我已经得到了.h2
显示活动标题(使用控制台将 js 注入您的页面)。您需要做的是onSlideAnimComplete
使用函数定义选项。
替换以下行:
$('#three').liteAccordion({ theme : 'dark', rounded : true, enumerateSlides : false, firstSlide : 5, linkable : true, easing: 'easeInOutQuart' });
与:(我整理了一下间距)
$('#three').liteAccordion({
theme : 'dark',
rounded : true,
enumerateSlides : false,
firstSlide : 5,
linkable : true,
easing: 'easeInOutQuart',
onSlideAnimComplete: function() {
//Changes .h2 upon animation complete
$('.h2').html($('h2.selected span').html());
}
});
然后删除行:
<script>
$('h2 a.active').change(setDisplayText).on('click', function(e) {
$('.sub_heading').html($(this).text());
e.preventDefault();
});
</script>
应该得到你正在寻找的功能(删除最后一部分只是为了删除冗余和控制台中显示的错误数量。)
你会注意到这.h2
不会立即改变。我尝试首先使用该onTriggerSlide
选项更改文本,但h2.selected
在动画完成之前不会转移到新标题,因此它会显示以前h2.active
的文本。如果你想制作动画.h2
来调整它的过渡,你可以fadeOut
(或任何你想要的动画)打开onTriggerSlide
,然后重新制作动画onAnimSlideComplete
。本页分解了您使用 liteAccordion 的所有选项/方法。
让我知道这是否适合您以及您是否需要更多帮助:)
原始帖子:
由于我没有更大的上下文,因此我不会为您编写任何代码,但我很确定您正在寻找的内容可以通过定义您想要在点击时发生的任何事情来完成通过指定 activate 或 beforeActivate 选项来初始化手风琴。查看
http://api.jqueryui.com/accordion/#event-activate,我相信您应该找到答案。
我不知道你到底想做什么,所以你必须弄清楚是使用 ui.newHeader、ui.oldHeader、ui.newPanel 还是 ui.oldPanel,然后你想用它们做什么,但这里有一些东西可以帮助您入门:
$('.acc').accordion({
activate: function(e,ui) {
console.log(ui.newTab.html());
});
});