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 に答える