如何创建一个优雅的手风琴菜单

How do I create an elegant accordination menu?

本文关键字：手风琴 菜单 一个 何创建 创建      更新时间：2023-11-08

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

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

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

我已经使用各种教程创建了一个粗略的实现，但我很难以一种非常优雅的方式正确地创建它。我看过一些人为这种东西写的JS，我永远无法理解

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

它有点有效，但它很有缺陷，有时会导致双重动画，或者根本不起作用。当你沿着树走了几次，然后试图关闭树内或树顶部的项目时，这尤其容易出错。

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

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

相关文章：