0

slideUpand関数を使用してslideDown、jQuery アコーディオンを生成します。しかし、次のような外部リンクでアコーディオンを開くにはどうすればよいですか?

例: http://www.example.com/page.html# 1は最初のパネルをスライドダウン/開き、http://www.example.com/page.html# 3は 3 番目のパネルを開きます。

これは私のhtmlです：

<div id="leftCol-3">
    <div class="csc-header">
        <h1>Header-1</h1>
    </div>
    <div class="accordionTrigger" id="link-1">body Text-1</div>
    <div class="csc-header">
        <h1>Header-2</h1>
    </div>
    <div class="accordionTrigger" id="link-2">body Text-2</div>
    <div class="csc-header">
        <h1>Header-3</h1>
    </div>
    <div class="accordionTrigger" id="link-3">body Text-3</div>
</div>

そして、これは私のjsです:

$(document).ready(function()  {
    //From http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

    // hide the divs on page load   
    $('#leftCol-3 div > .accordionTrigger').hide(); 

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('#leftCol-3 div .csc-header').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('#leftCol-3 div .csc-header').removeClass('active');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.accordionTrigger').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('active');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 

     });
});
4

1 に答える 1

0

URL によってトリガーされる ID にクラス「アクティブ」を動的に追加する必要があります。これを行うには、各 div.accordionTrigger に ID を追加する必要があります。

したがって、「body Text-1」を表示するには:

<div id="leftCol-3">
    <div class="csc-header">
        <h1>Header-1</h1>
    </div>
    <div class="accordionTrigger active" id="text1">body Text-1</div>
    <div class="csc-header">
        <h1>Header-2</h1>
    </div>
    <div class="accordionTrigger" id="text2">body Text-2</div>
    <div class="csc-header">
        <h1>Header-3</h1>
    </div>
    <div class="accordionTrigger" id="text3">body Text-3</div>
</div>

PHP などのサーバー側スクリプトにアクセスできますか? そうでなければ、jQueryソリューションもあると確信しています。

于 2012-08-11T05:44:15.333 に答える