JSFiddle

Question

我设法让这个脚本工作，因此它会扩展和折叠。但是，我希望在同一页面上有两个。

我试着将_two添加到所有的手风琴中，但它似乎不起作用。我做错了什么？

第二个搞砸了。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>accordion demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <style>
            #accordion .ui-icon { display: none; }
            #accordion a {
                border: none;
                text-decoration: none;
            }
            #accordion .ui-accordion-content { border:none; }
            #hide {
                display: none;
            }

            #accordiontwo .ui-icon { display: none; }
            #accordiontwo a{
                border: none;
                text-decoration: none;
            }
            #accordiontwo .ui-accordiontwo-content { border:none; }
            #hide{
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="accordion" style="width:750px;margin-left:400px;margin-top:100px;">
            <h5 style="background:#73C7F2;text-align:center;" id="topbit"><p id="show">Click here to show Single links</p><p id="hide">Click here to hide split links</p></h5>
            <div>
                <div style="width:45%;height:40px;background:#ccc;float:left;margin-right:20px;border-radius:5px;padding-top:20px;padding-left:10px;">
                        <a href="#">Single Link Sample</a>
                </div>
            </div>
        </div>

        <div id="accordiontwo" style="width:750px;margin-left:400px;margin-top:100px;">
            <h5 style="background:#73C7F2;text-align:center;" id="topbittwo"><p id="showtwo">Click here to show Single links</p><p id="hidetwo">Click here to hide split links</p></h5>
            <div>
                <div style="width:45%;height:40px;background:#ccc;float:left;margin-right:20px;border-radius:5px;padding-top:20px;padding-left:10px;">
                        <a href="#">Single Link Sample</a>
                </div>
            </div>
        </div>

        <script>
            $(function() {
                $("#accordion").accordion({ topbit: "h5", collapsible: true, active: false});
            });

            $("#topbit").click(function(){
                $("#hide").toggle();
                $("#show").toggle();
            });

        </script>

        <script>
            $(function() {
                $("#accordiontwo").accordion({ topbittwo: "h5", collapsible: true, active: false});
            });

            $("#topbittwo").click(function(){
                $("#hidetwo").toggle();
                $("#showtwo").toggle();
            });
        </script>

    </body>
</html>

这是一个JSFiddle链接：http://jsfiddle.net/HtY54/1/。

Answer 1

这是因为您没有将CSS中#hide的第二个实例更改为#hidetwo，一旦您这样做，它就会起作用：

#hidetwo{
    display:none;
}

我该如何复制这个可扩展的div？

1 个答案:

JSFiddle