javascript - 单击时切换列表项

Question

我正在尝试建立一个列表，当单击 dt 时，会出现相应的 dd，当他重新单击该 dt 时，dd 会向上滑动。

除非用户单击它，否则第一个 dd 始终保持不变。

问题是，当用户点击一个 dt 时，所有的 dd 都会出现。

小提琴演示在这里

Answer 1

尝试使用.nextUntil点击dt如下，

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

})();

演示： 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');
    })

})();