Question

我想用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>

总是看起来像这样（内部菜单始终可见）：

enter image description here

有什么想法吗？

Answer 1

使用这个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/

Answer 2

您可能错过了以下库或样式表之一，否则我在代码中看不到任何错误。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

这是一个适合你的小提琴：http://jsfiddle.net/NrfW8/

jquery-ui菜单不能正常工作

2 个答案: