Question

我正在尝试制作一个简单的手风琴，但是一旦dds被点击，我就无法打开dt。

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

但是只有被点击的dt下的dd保持打开状态，其他所有dd都会被隐藏。

Answer 1

“点击dt后，我无法打开dds。”

如果您希望在点击新广告时关闭所有其他广告，只需在点击内添加您的hide()广告：

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

jsFiddle here.

虽然您可以使用CSS代替最初的$('dd').hide();：dd { display:none; }

Answer 2

无论tagName如何，

siblings()都会定位任何兄弟姐妹，因此隐藏dd和dt个元素。
您需要根据tagName过滤兄弟姐妹，以仅隐藏兄弟dd元素：

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

在this（）方法之后隐藏元素的兄弟

2 个答案: