javascript - 如何创建优雅的 Accordion 菜单？

Question

我正在尝试创建一个展开和折叠菜单以在 移动设备(例如 iOS)上工作，这样当您单击每个项目时，它会展开包含的菜单(如果存在) .

如果您再次单击该项目，它将关闭相关的封闭菜单。

不过，我还想创建 Accordion 动画，这样如果您在打开其他嵌套菜单(在菜单树的当前部分中)时单击另一个项目，它将关闭所有其他打开的菜单并打开新菜单。

我已经设法使用各种教程创建了一个粗略的实现，但我正在努力以一种非常优雅的方式创建它并正常工作。我看过有人为了这种东西写的JS，我一直看不懂。

请查看我在这个 jsFiddle 中的尝试:http://jsfiddle.net/W59P9/5/

它有点可以工作，但它有很多错误，有时会导致双重动画或根本不工作。当您沿着树向下走几次，然后尝试关闭该树内或树顶的项目时，它尤其容易出问题。

Answer 1

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">        </script>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $("#accordion").accordion({ active: false,
        collapsible: true
    });
});
</script>
<div id="accordion">
<h3>
    <a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
        Start Service</a></h3>
<div style="height: 40px;">
    <span>Start or Stop Servcice </span>
    <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px">
        <p>
            some text
        </p>
    </asp:Panel>
</div>
<h3>
    <a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
        Customer Service</a></h3>
<div>
    <b>Contact Us</b>
    <asp:Panel ID="pnlSrvc" runat="server" BorderStyle="Solid" BorderWidth="1px">
        <p>some text<p>
    </asp:Panel>
</div>
<h3>
    <a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
       some text</a></h3>
<div style="height: 40px;">
    <span>some text </span>
    <asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" BorderWidth="1px">
        <p>
            some text
        </p>
    </asp:Panel>


</div>
<h3>
    some text
</h3>

这是我在我的移动网站上使用的东西，它运行良好。它有一些我的项目代码，但我希望你能弄清楚你想要什么......