更新された解決策:
アクティブなヘッダーを表示するようにし
ました.h2
(コンソールを使用して js をページに挿入しました)。あなたがする必要があるのはonSlideAnimComplete
、関数でオプションを定義することです。
次の行を置き換えます。
$('#three').liteAccordion({ theme : 'dark', rounded : true, enumerateSlides : false, firstSlide : 5, linkable : true, easing: 'easeInOutQuart' });
with: (間隔を少し整理しました)
$('#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
を使用してテキストを変更しようとしましたが、アニメーションが完了するまで新しいヘッダーに転送されないため、以前の のテキストが表示されます。トランジションを調整するためにアニメーション化する場合は、 (または任意のアニメーション) をオンにしてから、 でアニメーション化することができます。このページでは、liteAccordion で使用できるすべてのオプション/方法について説明します。
これがうまくいくかどうか、さらにサポートが必要な場合はお知らせください:)
onTriggerSlide
h2.selected
h2.active
.h2
fadeOut
onTriggerSlide
onAnimSlideComplete
元の投稿:
私はより大きな文脈を持っていないので、あなたのために多くのコードを書きませんが、あなたが探していることは、あなたがクリックしたときに何が起こるかを定義することによって実行できると確信しています. 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());
});
});