将jQuery的slideUp/slideDown与定义列表一起使用的最佳方法是什么

Question

我有一个定义列表如下：

<dl>
    <dt>Status</dt>
    <dd>Blue</dd>
    <dt>Last Updated</dt>
    <dd>16/05/2013</dd>
    <dt>Overview/summary:</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis amimus lacus sed imperdiet consequat, orci nisl pretium nunc, sed lobortis ligula neque. Quisque vitae sem dolor scelerisque urna. Integer placerat scelerisque ipsum. Aliquam imperdiet interdum magna eget vulputate. Donec interdum tincidunt tortor, eget condimentum magna suscipit et. Curabitur bibendum elit sit amet nisi pharetra vitae venenatis metus</dd>
    <dt>Past Dates:</dt>
    <dd>16/05/2013, 15/05/2013, 14/05/2013</dd>                  
    <dt>Future Dates:</dt>
    <dd>United Kingdom</dd>
</dl>

我需要使用显示/隐藏类型效果来显示和隐藏列表的后半部分。

即从"概述/摘要"向下。

我想将可折叠信息包装在div 中，如下所示：

<dl>
    <dt>Status</dt>
    <dd>Blue</dd>
    <dt>Last Updated</dt>
    <dd>16/05/2013</dd>
    <div class="js-collapsible">
        <dt>Overview/summary:</dt>
        <dd>Lorem ipsum dolor sit amet</dd>
        <dt>Past Dates:</dt>
        <dd>16/05/2013, 15/05/2013, 14/05/2013</dd>                  
        <dt>Future Dates:</dt>
        <dd>United Kingdom</dd>
    </div>
</dl>

但这在语义上有意义吗？我觉得这种方法正在损害结构。

任何建议都会很棒:)

谢谢

Answer 1

你可以添加一个类来dt，并使用nextAll()选择之后的所有元素。addBack()添加指定的dt元素。

 $("dt.classname").nextAll().addBack().hide();

或者，如果确定要隐藏第三个dt元素，请使用eq()

 $("dt:eq(2)").nextAll().addBack().hide();

Answer 2

它在语义上没有意义，因为它是错误的标记：

dl - 允许的内容 - 零个或多个：一个或多个dt元素， 后跟一个或多个dd元素。

只需为该特定 dt 提供一个类：

<dt class="thisOne">Overview/summary:</dt>

然后你可以使用 prevAll 和 nextAll：

$('.thisOne').nextAll().hide();

或

$('.thisOne').prevAll().hide();