僅當單擊另一個「ul」時纔會出現jQuery SlideDown

我有一個無序列表。僅當單擊另一個「ul」時纔會出現jQuery SlideDown

<div class="categories-list"> 
    <ul class="display_categories"> 
     <li> 
      <a class="title"><span><b>1</b></span></a> 
      <ul class="display_subcategories"> 
       <li><a>22</a></li> 
       <li><a>22</a></li> 
      </ul> 
     </li> 
     <li> 
      <a class="title"><span><b>1</b></span></a> 
      <ul class="display_subcategories"> 
       <li><a>22</a></li> 
       <li><a>22</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

我想，當用戶點擊任何類別，它的子類應了slideDown，並點擊同一類別時，沒有什麼應該發生。這裏是我的jQuery

$('.display_subcategories').hide() 
$('.title').click(function(){ 
    $('.display_categories').children().children('ul').slideUp('fast'); 
    $(this).next().slideDown('fast'); 
})

，但發生的事情是，當點擊已經了slideDown類，它再次向上滑動，然後滑下。

這裏是jsFiddle鏈接

來源

2016-04-29 PythonEnthusiast

可以slideDown當前的子菜單，然後使用not()到slideUp()以外的所有電流，就像這樣：

$('.display_subcategories').hide() 
$('.title').click(function() { 
    var $submenu = $(this).next().slideDown('fast'); 
    $('.display_categories').find('> li > ul').not($submenu).slideUp('fast'); 
});

Updated fiddle

還要注意使用find()與後代選擇器鏈接children()調用。

來源

2016-04-29 13:01:31

感謝您的回答。請問你以前的答案和你現在的答案有什麼區別？ – PythonEnthusiast

這個效率更高，因爲它使用更少的選擇器，而且更短。 –

謝謝..請求您發佈兩個解決方案。 :) – PythonEnthusiast

試試這個

$('.display_subcategories').hide(); 

    $('.title').click(function(){ 
     if(!$(this).hasClass('down')){ 
      $('.title').removeClass('down'); 
      $('.display_categories').children().children('ul').slideUp('fast'); 
      $(this).next().slideDown('fast'); 
      $(this).addClass('down'); 
     } 
    })

Updated JS Fiddle

來源

2016-04-29 13:12:12

我建議讓CSS通過觸發或禁止類管理您的動畫。一個簡單的例子是添加.active類開放<ul>，下面CSS：

.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; } 
.display_subcategories.active { max-height: 50px; }

這裏是a modified JSFiddle我的建議。

來源

2016-04-29 13:15:35

僅當單擊另一個「ul」時纔會出現jQuery SlideDown

回答

相關問題