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錯誤？

回答

相關問題