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>

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

即。从“概述/摘要”向下。

我想将可折叠信息包装在这样的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

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

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

给这个特定的dt上课：

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

然后你可以使用prevAll和nextAll：

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

或

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

Answer 2

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

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

如果您确定要隐藏第三个eq()元素

，请使用dt

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

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

2 个答案: