Question

我正在为我的项目使用模板。我在这个模板中有一个手风琴菜单，但它还没有准备好使用（不是滑动或向下）。如何在点击时进行上滑和下滑？这是我的代码和菜单中的截图。我也给了html源代码。

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

Asp.net Mvc4中的手风琴菜单

1 个答案: