Question

我正在尝试创建一个扩展和折叠菜单，以便在iOS上运行移动设备，这样当您点击每个项目时，它会展开包含菜单（如果存在）。

如果再次点击该项目，它将关闭相关的随附菜单。

然而，我还想创建一个合作动画，这样如果你打开其他嵌套菜单时点击另一个项目（在菜单树的当前部分），它将关闭所有其他打开菜单并打开新菜单。

我已经设法使用各种教程创建了一个粗略的实现，但我正在努力以一种正常工作的非常优雅的方式创建它。我见过有些人为这类事写的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>

这是我在我的移动网站上使用的东西和它的工作良好..它有我的一些项目代码，但我希望你能搞清楚你想要的东西......

如何创建优雅的配音菜单？

1 个答案: