0

次のような定義リストがあります。

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

しかし、これは意味的に意味がありますか? このアプローチは構造を危うくしているように感じます。

どんな提案も素晴らしいでしょう:)

ありがとう

4

2 に答える 2

1

マークアップが正しくないため、意味的に意味がありません。

dl-許可されたコンテンツ- 0 個以上: 1 つ以上のdt要素、その後に 1 つ以上の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();

または、3番目の要素eq()を確実に非表示にする場合に使用しますdt

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