首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >链接到打开jQuery折叠

链接到打开jQuery折叠
EN

Stack Overflow用户
提问于 2009-02-25 21:43:09
回答 7查看 43.5K关注 0票数 10

我正在尝试从外部链接打开一个手风琴div。我看到了“导航: true”选项,但我不确定如何实现它。你给每个div一个id并像这样调用链接吗?http://domain.com/link#anchorid

我是新来jQuery的,请耐心听我说。这是我使用的代码,如果它有用的话。

代码语言:javascript
复制
<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>
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2009-02-25 23:27:26

导航选项不适用于面板激活。它用于告诉用户他们在哪里。

使用简化的html代码:

代码语言:javascript
复制
<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 (简化):

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

“导航:真”将使您能够访问www.site.com/#about,这将使"about“面板处于选中状态。对于激活,有几种方法。也许一种方法是获取一个查询字符串并将其放入jQuery中。

使用C#

代码语言:javascript
复制
$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

使用PHP

代码语言:javascript
复制
$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

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

票数 13
EN

Stack Overflow用户

发布于 2014-07-10 22:17:55

许多答案提到的navigation选项是 in jQuery UI 1.9在1.10中删除了。给出的理由是:

默认情况下,此功能处于禁用状态,并且只是您想要确定在初始化时激活哪个面板的多种方法之一。因此,我们不赞成这样做,只支持在accordion之外处理逻辑,并适当地设置active选项。

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

对于我的站点,我在</body>标记之前使用了一条JavaScript switch语句来实现这一点。(我不是一个有经验的程序员,所以其他人应该可以改进这个答案。)

代码语言: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:

代码语言:javascript
复制
<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>
票数 5
EN

Stack Overflow用户

发布于 2010-03-24 22:49:18

哈,破解了。

使用php get方法。然而,上面的代码中有一个错误。$("#accordion").accordion("activate",'');

php代码需要删除引号。

现在很管用了。

干杯

伊恩

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/588030

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档