Question

我必须使用jQuery在asp.net 4上创建一个带有垂直滑动幻灯片菜单的简单网页。所以我在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>

然后将WebUserControl添加到我的Default.aspx并为菜单编写样式：

.mainMenu
{
    background-color: #d9dada;
    min-width: 230px;
    height: auto;
    min-height: 300px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding-left: 20px;
    padding-top: 40px;
}
.level1
{
    color: #434242;
    background-color: #d9dada;
    width: 190px;
    padding-left: 20px;
    height: 35px;
    font-size: 18px;
}
.level2
{
    color: #727271;
    background-color: #fefefe;
    padding-left: 20px;
    width: 190px;
    height: 35px;
    font-size: 18px;
}

然后在MasterPage中找到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中有错误或我写的CSS样式错了吗？这是HTML生成的代码：

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

Answer 1

正如其他人在评论中提到的那样，你真的不应该依赖JavaScript来使菜单工作。

HTML Dog有一个相当广泛的教程集合，用于解释如何使用JavaScript进行CSS +渐进增强来实现基本效果，您可以在此处找到：http://www.htmldog.com/articles/suckerfish/

jQuery或CSS错误？

1 个答案: