0

我正在尝试制作一个简单的手风琴，但是一旦单击 ddsa，我就无法打开关闭。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 保持打开状态，而所有其他都被隐藏。

4

2 回答 2

1

“一旦单击 dt，我就无法关闭打开的 dds。”

如果您希望在单击新事件时关闭所有其他事件，只需hide()在单击中包含您的事件：

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

jsFiddle在这里。

虽然您可以只使用 CSS 作为初始值$('dd').hide();：dd { display:none; }

于 2013-06-24T17:55:11.450 回答
0

siblings()将针对任何兄弟姐妹，而不管 tagName 是什么，因此dd和dt元素都将被隐藏。
您需要根据 tagName 过滤兄弟姐妹以仅隐藏兄弟dd元素：

$('dt').on('click', function() {
    $(this).next().toggle().siblings('dd').hide()
});
于 2013-06-24T18:17:40.200 回答