jQuery还是CSS错误？

我必须使用jQuery在asp.NET4上创建一个带有垂直向下滑动菜单的简单网页。 所以我在WebUserControl中编写了我的菜单：

<asp:Menu ID="Menu" CssClass="mainMenu" Orientation="Vertical" runat="server" StaticDisplayLevels="3"
    StaticSubMenuIndent="0">
    <Items>
        <asp:MenuItem Text="Text1" />
        <asp:MenuItem Text="Text2">
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
            <asp:MenuItem Text="text2" />
        </asp:MenuItem>
        <asp:MenuItem Text="Text3">
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
            <asp:MenuItem Text="text3" />
        </asp:MenuItem>
        <asp:MenuItem Text="Text4" />
    </Items>
</asp:Menu>

然后在母版页中找到Default.aspx并为我的菜单编写jQuery脚本：

<div class="menuContainer">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".level2").hide();
                $(".level1").click(function () {
                    $(this).next(".level2").slideToggle("slow");
                    return true;
                });
            });
        </script>
   </div>

正如其他人在评论中提到的那样，你真的不应该依靠JavaScript让菜单正常工作

---

HTML Dog有一个相当广泛的教程集来解释如何使用CSS+渐进增强JavaScript实现基本效果，您可以在这里找到：

任何JavaScript警告或错误？您可以发布服务器端处理后生成的HTML吗？如果

.level1

和

.level2

不是同级，则

$（此）.next

将不起作用。在请求解决客户端问题时，请不要发布服务器端代码。为什么要使用asp:菜单？此控件具有自己的显示和隐藏菜单的功能，并省略了自己的javascript来执行此操作。javascript应仅用于将

li:hover

功能添加到IE6或用于制作动画。否则，这可以也应该在纯CSS中完成。即使是动画，任何JavaScript都应该是渐进的；菜单应该是纯CSS，并且禁用JavaScript。有一个只在启用JavaScript的情况下工作的菜单真是太棒了。

<div class="menuContainer">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".level2").hide();
                $(".level1").click(function () {
                    $(this).next(".level2").slideToggle("slow");
                    return true;
                });
            });
        </script>
   </div>

<div class="mainMenu" id="ContentPlaceHolder1_ctl00_Menu">
    <ul class="level1">
        <li><a class="level1" href="#">Text1</a></li>
        <li><a class="level1" href="#">Text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level2" href="#">text2</a></li>
        <li><a class="level1" href="#">Text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level2" href="#">text3</a></li>
        <li><a class="level1" href="#">Text4</a></li>
    </ul>
</div>