0

jquery-ui メニュー ウィジェットでメニューを作成したいのですが、うまくいきません。

コードは基本的なサンプルです:

        <script>
            $(document).ready(function () {
                $("#menu").menu();
            });
        </script>
        <style>
            .ui-menu
            {
                width: 150px;
            }
        </style>

        <ul id="menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a>
                <ul>
                    <li><a href="#">Item 3-1</a></li>
                    <li><a href="#">Item 3-2</a></li>
                    <li><a href="#">Item 3-3</a></li>
                    <li><a href="#">Item 3-4</a></li>
                    <li><a href="#">Item 3-5</a></li>
                </ul>
            </li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>

常に次のように表示されます (内部メニューは常に表示されます)。

ここに画像の説明を入力

何か案が？

4

2 に答える 2

0

この jQuery スクリプトを使用します。

$(document).ready(function () {
                $("#menu").menu();
                $("#inner").hide();
                $("#i3").click(function() {
                $("#inner").toggle(); });

            });

htmlコードを次のように変更した後：

<li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li id="i3"><a href="#">Item 3</a>
                <ul id="inner">
                    <li><a href="#">Item 3-1</a></li>
                    <li><a href="#">Item 3-2</a></li>
                    <li><a href="#">Item 3-3</a></li>
                    <li><a href="#">Item 3-4</a></li>
                    <li><a href="#">Item 3-5</a></li>
                </ul>
            </li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>

私があなたのために作ったjsfiddleをチェックしてください：http://jsfiddle.net/8ryps/

于 2013-10-18T09:03:53.340 に答える