链接到打开jQuery Accordion

Question

我正试图从外部链接打开手风琴div.我看到"navigation:true"选项,但我不确定如何实现它.你给每个div一个id并调用这样的链接吗？http://domain.com/link#anchorid

我是jQuery的新手所以请耐心等待.这是我正在使用的代码,如果它有帮助.

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
         });
    </script>
<div id="accordion">

<div>
    <h2><a href="#">Services</a></h2>
    <div class="services">
    <p>More information about all of these services</p>
    </div>
</div>

Answer 1

导航选项不适用于面板激活.这是为了告诉用户他们在哪里.

使用简化的html代码:

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

您将唯一ID放在标题中的超链接中

然后jQuery(简化):

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", navigation: true });
     });
</script>

"navigation:true"将使您可以访问www.site.com/#about,从而选择"关于"面板.对于激活,有两种方法.也许一种方法是获取查询字符串并将其放入jQuery中.

用C#

$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

用PHP

$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

这将允许您指定由www.site.com?id=2打开哪个面板

Answer 2

将navigation要被很多这些答案的参考选项不建议使用在jQuery UI的1.9,并删除在1.10.给出的理由是:

默认情况下禁用此功能,这只是您可能想要确定在初始化时激活哪个面板的众多方法之一.因此,我们不赞成仅仅处理手风琴之外的逻辑并适当地设置活动选项.

因此,使用较新版本的jQuery UI的编码人员需要编写自己的代码来处理此功能.

对于我的网站,我switch在</body>标记之前使用JavaScript 语句完成了此操作.(我不是一个经验丰富的编码员,所以其他人应该随意改进这个答案.)

<script>
function switchToPanel(panel){
    var index = -1;
    switch (panel) {
        case "preschool":
            index = 0;
            break;
        case "kindergarten":
            index = 1;
            break;
        case "1st":
            index = 2;
            break;
        default:
            console.warn("Cannot switch to panel " + panel);
    }
    jQuery('#mathAccordion').accordion({active: index});
}

jQuery().ready(function() {
    if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
        var target = window.location.hash.replace('#', ''); //remove the #
        switchToPanel(target);
    }
});
</script>

这是相应的HTML:

<div class="accordion" id="mathAccordion">
    <h1>Preschool</h1>
    <div class="accordionFold">Preschool content</div>
    <h1>Kindergarten</h1>
    <div class="accordionFold">Kindergarten content</div>
    <h1>1st Grade</h1>
    <div class="accordionFold">First grade content</div>
</div>