0

簡単なアコーディオンを作ろうとしていますが、クリック 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 のみが開いたままになり、他のすべては非表示になります。

4

2 に答える 2

1

「dt をクリックすると、開いている dd を閉じることができません。」

新しいものをクリックしたときに他のすべてのものを閉じたい場合はhide()、クリック内にイベントを含めるだけです。

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

ここでjsFiddle。

$('dd').hide();代わりにイニシャルに CSS を使用することもできますが: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 に答える