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选项在1.10中是deprecated in jQuery UI 1.9和已删除。给出的理由是：

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

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

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

<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>

Answer 3

哈，破解了它。

使用php get方法。但是上面的一个错误。 $（“＃accordion”）。accordion（“activate”，''）;

php代码需要删除引号。

现在就开始享受一种享受。

干杯

伊恩

Answer 4

使用服务器端语言，检查该#anchor的查询并使用它来填写激活语句。

从我正在处理的事情中提取：

$("#search_forms").accordion("activate", "{$this->open_form}");

修改

我无法直接链接到手风琴方法blurb，但这会让你接近：

http://docs.jquery.com/UI/Accordion#methods

Answer 5

这对我有用......

var hash = window.location.hash;
$("#accordion").accordion("activate", hash);

Answer 6

这对我有用。

<script>
$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});
</script>

和html ......

<div id="accordion">
        <h3 class="menuitem"><a href="#tab1">Tab1</a></h3>
        <div>
            More data....
        </div>
</div>

Answer 7

$("a").click(function(event){
    var hash = window.location.hash;
    $("#accordion").accordion("activate", hash);
});

这适用于jquery 1.8.3和jqueryui 1.9.1 但似乎没有使用jqueryui 1.10.0

不确定原因......

链接到打开jQuery Accordion

7 个答案: