0

I have a definition list as follows:

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

I need to use a show/hide type effect to show and hide the second half of the list.

ie. from 'Overview/summary' downwards.

I would like to wrap the collapsible information in a div like this:

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

but does this make sense semantically? I feel this approach is compromising the structure.

Any suggestions would be great :)

Thanks

4

2 回答 2

1

它在语义上没有意义，因为它是不正确的标记：

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

只需给那个特定的 dt 上课：

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

然后你可以使用 prevAll 和 nextAll：

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

或者

$('.thisOne').prevAll().hide();
于 2013-06-26T09:34:57.150 回答
1

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

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

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

 $("dt:eq(2)").nextAll().addBack().hide();
于 2013-06-26T09:45:53.977 回答