hide（）方法之後的元素的同胞

Question

我正在嘗試製作一個簡單的手風琴，但是我不能在點擊dt後關閉dds關閉。

<dl> 
    <dt>Lorem ipsum dolor sit amet?</dt> 
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.</dd> 
    <dt>Lorem ipsum dolor sit amet?</dt> 
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.</dd> 
    <dt>Lorem ipsum dolor sit amet?</dt> 
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.</dd> 
</dl> 

$('dd').hide(); 

$('dt').on('click', function() { 
    $(this).next().toggle(); 
}); 

我試圖

$(this).next().siblings().hide(); 
$(this).next().toggle(); 

但後來只有DD是被點擊保持打開的DT下，和所有其他獲得隱藏。

Answer 1

siblings()將針對任何兄弟，無論tagNam e，所以dd和dt元素都將被隱藏。
你需要篩選基於標記名只隱藏兄弟dd元素的兄弟姐妹：

$('dt').on('click', function() { 
    $(this).next().toggle().siblings('dd').hide() 
}); 

Answer 2

「一旦點擊dt，我無法打開dds關閉。」

如果希望所有其他的人在一個新的點擊關閉時，只需包括點擊裏面的hide()事件：

$('dd').hide(); 
$('dt').on('click', function() { 
    $('dd').hide(); 
    $(this).next().toggle(); 
}); 

jsFiddle here.

雖然你可以只使用CSS的初始$('dd').hide();改爲：dd { display:none; }