web-dev-qa-db-ja.com

jQueryUIアコーディオンアクティベート

これを行う方法がわからない、またはこれができるかどうか。 jQuery UIアコーディオンがあり、各セクションには一意の文字列IDを持つ複数のアンカータグが含まれています。

特定のIDを持つ特定の要素が存在する場所にアコーディオンを開いてもらいたいのですが。 id「item117」と言ってください。次のようなものを使用できますか

$('#accordion').activate('activate','#item117');

あるいは

$('#accordion').activate('activate',117);

私はそれらといくつかのバリエーションを試しましたが、うまくいきません。私が仕事を始めようとしていた場合、アコーディオンは2番目のセクションの終わりまで開いているはずです。

私はまだこれを取得していないので、おそらく私は何か他のことも間違っています。ここでサンプルページに分解しました： http://www.ofthejungle.com/testaccordion.php それとそのソースを見てください。

jqueryaccordionjquery-ui-accordion
10
eflat

ドキュメントから：

// getter
var active = $( ".selector" ).accordion( "option", "active" );

// setter
$( ".selector" ).accordion( "option", "active", 2 );
12
BTR

これも終わって、素敵で普遍的な解決策を見つけました
-クリックをエミュレート必要なアイテムのヘッダーとそのID

$('#header-of-item-258').click();

アコーディオンだけでなく、いつでもどこでも機能します

12
Peminator

私のために働いた

$("#accordion").accordion({active:"h3:last"})
10
Laurentiu

これは最終的に私のために働いた：

$("#accordion").accordion("activate", $("#h3-id"));

注意！！！ IDは、開きたい<h3>要素のIDである必要があります（デフォルトのアコーディオン設定で）。

9
Chuck Han

accordionという関数を使用して呼び出す必要があります。

// Open the third set (zero based index)
$('#accordion').accordion('activate', 2);

特定の要素を含むセクションを開くには、次のようにします。 注：通常はセクションを開いたり閉じたりするトリガーをターゲットにする必要があります。ドキュメントでは、これはh3要素であり、トリガー要素は異なる場合があるため、それに応じて変更してください。

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3');
8
Doug Neiner

#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);
3
delphiak

ヘッダーをクリックすると、それは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はグローバルです

2
nani

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);
1
Jeremy Zerr

別の方法があります。

アコーディオンの各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')
});
0
Martin Sansone - MiOEE

次のようにアコーディオンを有効または無効にすることもできます。

// 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");
0
Shib

試してみてください

$('#accordion').activate('#item117');

または

$('#accordion').activate(document.getElementById('item117'));

アコーディオンをアクティブにするための正しい構文は次のとおりです。

$(".selector").activate(var index)

ここで、インデックスはString、Element、boolean、Number、JQueryです。

0
Saeros