单击时切换列表项

Question

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

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

问题是，当用户点击dt时，会显示所有dd。

Fiddle demo here

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

})();

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

})();