0

我使用slideUpandslideDown函数来生成一个 jQuery 手风琴。但是如何使用外部链接打开手风琴，如下所示的链接：http://www.example.com/page.html# index-number，其中 index-number 与手风琴面板中的标题编号匹配。

例如：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');
         } 

     });
});
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 回答