使用jQuery'；s slideUp/slideDown与定义列表

我有一个定义列表如下：

<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>

地位
蓝色
最后更新
16/05/2013
概览/摘要：
Lorem ipsum dolor sit amet，是一位杰出的献身者。两人的饮食习惯不同，一人的饮食习惯不同，另一人的饮食习惯不同。奎斯克·维塔·多洛·斯克利斯·乌尔纳。整只鼠同侧权杖。这是一个巨大的挑战。不要在玉米饼中添加调味品，不要在威尼斯人的生命中添加调味品
过去日期：
16/05/2013, 15/05/2013, 14/05/2013                  
未来日期：
大不列颠联合王国

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

即从“概述/总结”向下

我想将可折叠信息包装在一个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>

地位
蓝色
最后更新
16/05/2013
概览/摘要：
Lorem ipsum dolor sit amet
过去日期：
16/05/2013, 15/05/2013, 14/05/2013                  
未来日期：
大不列颠联合王国

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

任何建议都很好：）

---

谢谢

它在语义上没有意义，因为它是：

dl

-允许的内容-零个或多个：一个或多个

dt

元素， 后跟一个或多个

dd

元素

只需为特定的dt设置一个类：

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

或

---

您可以向

dt

添加一个类，并使用

nextAll（）

选择之后的所有元素。

addBack（）

添加指定的

dt

元素

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

如果确定要隐藏第三个

dt

元素，请使用

eq（）

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

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

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