これを行う方法がわからない、またはこれができるかどうか。 jQuery UIアコーディオンがあり、各セクションには一意の文字列IDを持つ複数のアンカータグが含まれています。
特定のIDを持つ特定の要素が存在する場所にアコーディオンを開いてもらいたいのですが。 id「item117」と言ってください。次のようなものを使用できますか
$('#accordion').activate('activate','#item117');
あるいは
$('#accordion').activate('activate',117);
私はそれらといくつかのバリエーションを試しましたが、うまくいきません。私が仕事を始めようとしていた場合、アコーディオンは2番目のセクションの終わりまで開いているはずです。
私はまだこれを取得していないので、おそらく私は何か他のことも間違っています。ここでサンプルページに分解しました: http://www.ofthejungle.com/testaccordion.php それとそのソースを見てください。
ドキュメントから:
// getter
var active = $( ".selector" ).accordion( "option", "active" );
// setter
$( ".selector" ).accordion( "option", "active", 2 );
これも終わって、素敵で普遍的な解決策を見つけました
-クリックをエミュレート必要なアイテムのヘッダーとそのID
$('#header-of-item-258').click();
アコーディオンだけでなく、いつでもどこでも機能します
私のために働いた
$("#accordion").accordion({active:"h3:last"})
これは最終的に私のために働いた:
$("#accordion").accordion("activate", $("#h3-id"));
注意!!! IDは、開きたい<h3>要素のIDである必要があります(デフォルトのアコーディオン設定で)。
accordion
という関数を使用して呼び出す必要があります。
// Open the third set (zero based index)
$('#accordion').accordion('activate', 2);
特定の要素を含むセクションを開くには、次のようにします。 注:通常はセクションを開いたり閉じたりするトリガーをターゲットにする必要があります。ドキュメントでは、これはh3
要素であり、トリガー要素は異なる場合があるため、それに応じて変更してください。
$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3');
#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);
ヘッダーをクリックすると、それはh3要素であり、次のdiv ..つまり機能を開きます。ここで、アクティブ化するには、インデックスまたは要素を指定する必要があります。インデックスはIDと異なる場合があります。だから私は使用します:
$('.selector').accordion('option', 'activate', $(h3#id));
インデックスがある場合はそれを使用できますが、ほとんどの場合、アコーディオンを動的に作成した場合、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はグローバルです
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);
別の方法があります。
アコーディオンの各H3ヘッダータグにID = "someId"を含め、IDに一意の名前を付けます。
たとえば、このIDはシリーズ「AccjA」になり、次のh4は「AccjB」になります。
<h4 class="Accj" id="AccjA">
<a href="#settings">A Fan?</a>
</h4>
次に、必要なパネルをアクティブにします。
$('#Accjoin').accordion('activate', '#AccjoinA')
次のようなBenAlmanの「.doTimeout」関数を使用してページが2秒の遅延で読み込まれた後、タイムアウトで上記を使用してユーザーの注意を引きました。
$.doTimeout(2000, function () {
$('#Accjoin').accordion('activate', '#AccjoinA')
});
次のようにアコーディオンを有効または無効にすることもできます。
// 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");
試してみてください
$('#accordion').activate('#item117');
または
$('#accordion').activate(document.getElementById('item117'));
アコーディオンをアクティブにするための正しい構文は次のとおりです。
$(".selector").activate(var index)
ここで、インデックスはString、Element、boolean、Number、JQueryです。