开发者

Make a JQuery Accordion scroll through all panes?

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>
开发者_StackOverflow社区<h3><a href="#">Three</a></h3>
<div><img src="3.jpg" alt="" /></div>
</div>
</body>

</html>


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


It does support multiple activations: http://jsfiddle.net/morrison/v2FCJ/.

However, your code is triggering the second activate before the first one is done. The accordion does not apparently support queuing commands.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜