2

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

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

但是我还想创建一个手风琴动画，这样如果您在打开其他嵌套菜单（在菜单树的当前部分内）时单击另一个项目，它将关闭所有其他打开的菜单并打开新菜单.

我已经设法使用各种教程创建了一个粗略的实现，但是我正在努力以一种非常优雅的方式来创建它，并且可以正常工作。我见过一些人为这种事情写的JS，我永远无法理解。

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

它有点工作，但它非常有问题，有时会导致双重动画，或者根本不起作用。当您从树上下来几次然后尝试关闭该树内或从树顶关闭项目时，这尤其容易出错。

4

1 回答 1

0 
<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>

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

于 2012-07-18T20:27:08.550 回答