web-dev-qa-db-ja.com

jQuery Accordion-ページの読み込み時に特定のセクションを開く

ページにjQueryアコーディオンのかなり基本的な実装があり（1.3.2、jQuery UI Core 1.72およびjQuery UIアコーディオン1.7.2を使用）、ページが読み込まれたときに2番目のセクションを開きたいと思います。私は多くの方法を試しましたが、何もうまくいかないようです...

ヘッドスクリプト：

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

ボディアコーディオン：

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

どんな助けでも大歓迎です！

javascriptjqueryaccordion
15
Bomski
$("#accordion").accordion({ active: 2, event: "mouseover" });

トリックを行う必要があります！

[〜＃〜]更新[〜＃〜]

それでもうまくいかない場合は、

$("#accordion").accordion({  event: "mouseover" }).activate(2);

（NBこれはコメントのおかげで少し速くなるように更新されています。正直に言うと、「active：2」パラメーターで動作するはずですが、なぜそうしなかったかはわかりません。）

20
Ed James

特定のタブを開く適切な方法：

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

オプションを設定します。

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

または、次のようなハッシュを使用できます。

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

使用する場合は投票してください;）

ありがとう

10
Martijn van Hoof

以下は機能しますか？

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});
8
Adhip Gupta

試す

$("#accordion").activate(index);
3
Darmen Amanbayev

すべての単一ページを含めたmenu.phpを作成する必要があったので、この質問は少し異なりました。私たちのプロジェクトでは、1つのアコーディオン（2つのサブメニューを持つメニュー要素）がありました。したがって、ビジターがサブメニューにいるとき、アコーディオンは開いており、選択されたリンク（jQueryではなくCSSを使用して強調表示されています）がアクティブです。しかし、訪問者が別のページにいる場合、アコーディオンは正常に機能します。

これがjavascriptです：

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

あなたがそれを好き願っています。 =]

宜しくお願いします！ =]

1
benqus

active: 1は2ではなく、1からではなく0からセクションにインデックスを付けるためです。作業コードは次のようになります。

$("#accordion").accordion({ active: 1, event: "mouseover" });

それが少し役立つことを願っています。

0
swilgosz

他の人が述べたように、以下はオープン時にアクティブになります：

$("#accordion").accordion({ active: 1 });

アコーディオンのインデックスの2番目なので、active:1です。{0,1,2,...};要素のコンテンツに「2」という文字が含まれているため、他の回答には混乱があるようです...

0
THOMAS MANN