jQuery或CSS错误？

我必须使用jQuery在垂直滑动滑动菜单上创建一个简单的asp.net 4网页。所以我写了我的菜单中WebUserControl：jQuery或CSS错误？

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

然后位于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>

来源

2012-02-27 user1236071

任何JavaScript警告或错误？ – Joe 2012-02-27 18:06:04

您可以发布服务器端处理后生成的HTML吗？如果'.level1'和'.level2'不是兄弟，'$（this）.next'将不起作用。 – bfavaretto 2012-02-27 18:07:20

请求解决客户端问题时，请勿发布服务器端代码。 – 2012-02-27 18:12:34

正如其他人在评论中提到，你真的不应该依赖于JavaScript的菜单进行工作。

HTML狗有相当丰富的教程集合解释如何实现与JavaScript和CSS +渐进增强的基本效果，你可以在这里找到：http://www.htmldog.com/articles/suckerfish/

来源

2012-02-27 18:34:49

jQuery或CSS错误？

回答

相关问题