點擊切換列表項目

Question

我試圖建立一個列表，當點擊一個dt時，相應的dd會出現，當他重新點擊那個dt時，dd就會滑動。

第一個dd總是停留，除非用戶點擊它。

問題是，當用戶點擊一個dt時，所有的dd出現。

Fiddle demo here

Answer 1

嘗試在點擊dt像下面使用.nextUntil，

(function() { 
    var dd = $('dd'); 
    dd.filter(':lt(3)').addClass('show'); //add show to first 3 
    dd.filter(':nth-child(n+6)').addClass('hide'); //add hide to rest 

    $('dt').on('click', function() { 
     $(this).nextUntil('dt').toggleClass('show hide'); 
    }) 

})(); 

DEMO：http://fiddle.jshell.net/2MrxM/

Answer 2

這應該做到這一點。也更新了你的fiddle。

(function() { 
    var dd = $('dd'); 
    dd.filter(':nth-child(n+6)').addClass('hide'); 

    $('dt').on('click', function() { 
     $(this).nextUntil('dt').filter(':nth-child(n+4)').addClass('show'); 
    }) 

})();