Question

我使用slideUp和slideDown函数生成jQuery手风琴。但是如何通过外部链接打开手风琴，这样的链接： http://www.example.com/page.html# index-number ，其中index-number匹配accordion面板中标题的编号。

例如： http://www.example.com/page.html# 1 ，将滑入/打开第一个面板并 http：/ /www.example.com/page.html#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');
         } 

     });
});

Answer 1

您需要动态地将“活动”类添加到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解决方案。

打开带有外部链接的jquery手风琴

1 个答案: