Asp.net中的Accordion菜單Mvc4

Question

我正在爲我的項目使用模板。我在這個模板中有一個手風琴菜單，但它沒有準備好使用（不是滑動或向下）。我怎樣才能讓它上下滑動點擊？這裏是我的代碼和我的菜單中的屏幕截圖。我也給了html源代碼。

Menu

<div class="box-content box-category"> 
      <ul id="main"> 
       @foreach (var kategori in Model.kategoriler) 
       { 
        <li> <a class="active" href="grid.html">@kategori.KategoriAd</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
        @foreach (var altkat in kategori.AltKategoriler) 
        { 

         <li> <a href="grid.html">@altkat.AltKategoriAd</a>            
         </li> 
        }           
       </ul> 
        </div>   
      </li>  
       }      
      </ul> 
     </div> 

源代碼：

<div class="box-content box-category"> 
      <ul id="main"> 
        <li> <a class="active" href="grid.html">Kalemler</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Jel Kalemler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Boya Kalemleri</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Kurşun Kalemler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Dolma Kalemler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">T&#252;kenmez Kalemler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Fosfoslu Kalemler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Pilot Kalemler</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Defterler</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Orta Boy Defterler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">K&#252;&#231;&#252;k Boy Defterler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">B&#252;y&#252;k Boy Defterler</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Okul Defterleri</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">G&#252;nl&#252;k ve Ajandalar</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Seyahat Defterleri</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Tarif Defterleri</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Baskılar</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Kalpli Baskı</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Vintage Baskı</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Saatli Baskı</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Kalem Kutuları</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">&#199;ıt&#231;ıtlı Meyveli Kalem Kutusu</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Deri &#199;i&#231;ekli Kalem Kutusu</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Aksesuarlar</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Paper Doll Bozuk Para C&#252;zdanı</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">&#199;izgili Bozuk Deri Para C&#252;zdanı</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Hesap Makinesi</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Hesap Makinesi</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Dekorasyon</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Minyat&#252;r Banklar</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">M&#252;zik Kutuları</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Kapı S&#252;sleri</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Bantlar</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">Aynalar</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Metal Kutular</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Mini Metal Kutular</a>     
          <!--level1--> 
         </li> 
         <!--level1--> 
         <li> <a href="grid.html">&#199;i&#231;ekli Metal Kutular</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
        <li> <a class="active" href="grid.html">Ivır Zıvırlar</a> <span class="subDropdown plus" id="btnPlus"></span> 
       <div > 
         <ul class="level0_415" style="display:none" id="subcats">    
         <!--level1--> 
         <li> <a href="grid.html">Mandallar</a>     
          <!--level1--> 
         </li> 
       </ul> 
        </div>   
      </li>  
      </ul> 
     </div> 

Answer 1

我解決了這個問題，這裏是我的解決方案。

$(document).ready(function() { var panels = $('#main > li > ul').hide();    
      $('#main > li > span').click(function() { 
       var $this = $(this); 
       panels.slideUp(); 
       $('#main > li > span').not($this).removeClass('subDropdown minus'); 
       $('#main > li > span').not($this).addClass('subDropdown plus'); 
       $this.next().toggle(); 
       $this.toggleClass('subDropdown plus').toggleClass('subDropdown minus'); 

       return false; 
    });});