jQueryまたはCSSの間違い？

Question

私は、asp.net 4上にjQueryを使って垂直スライダアップスライドアップメニューを使って簡単なWebページを作成する必要があります。 は、だから私は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にWebUserControlを追加し、メニューのスタイルを書いた：

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

Answer 1

はあなたが本当にしても動作するようにメニュー用のJavaScriptに頼るべきではありません、コメントで言及しています。 http://www.htmldog.com/articles/suckerfish/