让 JQuery Accordion 滚动浏览所有窗格？

发布于 2024-11-05 06:43:29 字数 1446 浏览 0 评论 0原文

我想使用我的 JQuery Accordion，并在最后一个元素上开始打开它，让每个窗格相继下拉（以使用户清楚地知道还有其他内容窗格可供他们查看）。我可以使用 Accordion.accordion("activate", index) 来更改打开的窗格，但它只能工作一次（连续调用似乎没有任何效果？）。

现在，下面的代码初始化手风琴并激活窗格一，但对窗格二没有任何影响。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
    $(function () {
        nyah = $("#accordion").accordion({
            event: "mouseover",
            animated: "bounceslide"
        });
        nyah.accordion("activate", 1);
        for (var i = 0; i < 1000; i++) {
            i++;
        }
        nyah.accordion("activate", 2);
    });
    </script>

</head>
<body>
<div id = "accordion">
<h3><a href="#">One</a></h3>
<div><img src="1.png" alt="" /></div>
<h3><a href="#">Two</a></h3>
<div><img src="2.jpg" alt="" /></div>
<h3><a href="#">Three</a></h3>
<div><img src="3.jpg" alt="" /></div>
</div>
</body>

</html>

原文

I want to take my JQuery Accordion and, with it starting open on the last element, have each pane successively drop down (to make it clear to the user that there are other panes of content available for them to view). I can am using Accordion.accordion("activate", index) to change the open pane, but it only works once (successive calls don't seem to have any effect?).

Right now the code below initializes the accordion and activates pane one, but doesn't have any effect on pane two.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
    $(function () {
        nyah = $("#accordion").accordion({
            event: "mouseover",
            animated: "bounceslide"
        });
        nyah.accordion("activate", 1);
        for (var i = 0; i < 1000; i++) {
            i++;
        }
        nyah.accordion("activate", 2);
    });
    </script>

</head>
<body>
<div id = "accordion">
<h3><a href="#">One</a></h3>
<div><img src="1.png" alt="" /></div>
<h3><a href="#">Two</a></h3>
<div><img src="2.jpg" alt="" /></div>
<h3><a href="#">Three</a></h3>
<div><img src="3.jpg" alt="" /></div>
</div>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿嘿嘿 2024-11-12 06:43:29

使用 setTimeout 这样的事情怎么样？我认为你的问题是你在第一次激活完成之前调用激活。

http://jsfiddle.net/xgFpD/1/

$(function() {
    var accordionCount = $("#accordion h3").length;

    nyah = $("#accordion").accordion({
        event: "mouseover",
        animated: "bounceslide"
    });



    function doExpand(index) {

        nyah.accordion("activate", index);

        if (index + 1 <= accordionCount) {
            setTimeout(function() {
                doExpand(index + 1);
            }, 1000);
        }
    }

    doExpand(0);
});

How about something like this using setTimeout. I think your problem is that you're calling activate before the first activate finishes.

http://jsfiddle.net/xgFpD/1/

$(function() {
    var accordionCount = $("#accordion h3").length;

    nyah = $("#accordion").accordion({
        event: "mouseover",
        animated: "bounceslide"
    });



    function doExpand(index) {

        nyah.accordion("activate", index);

        if (index + 1 <= accordionCount) {
            setTimeout(function() {
                doExpand(index + 1);
            }, 1000);
        }
    }

    doExpand(0);
});

回复收藏 0 原文