26

HTML5 では、記事の目次をマークアップするのに役立つ 2 つの新しい要素、detailsとsummaryが追加されています。

details 要素はデフォルトで閉じられており (summary 要素以外はすべて非表示)、クリックすると展開されてその内容が表示されます。これを行うと、details 要素に「open」属性が追加されます。

open 属性をマークアップに追加しなくても、要素がデフォルトで開くようにしたいと思います。CSS を介してこれを行うことは可能ですか、それともスクリプトを使用する必要がありますか?

例：

<details>
<summary>Table of Contents</summary>
    <ul>
        <li><a href="#" class="active">Introduction</a></li>
        <li><a href="/2/">Body</a></li>
        <li><a href="/3/">Conclusion</a></li>
    </ul>
</details>
4

4 に答える 4

30

次のように、open 属性を詳細タグに追加できます。

<details open>
    <summary>Table of Contents</summary>
    <ul>
        <li><a href="#" class="active">Introduction</a></li>
        <li><a href="/2/">Body</a></li>
        <li><a href="/3/">Conclusion</a></li>
    </ul>
</details>

属性はデフォルトで展開されます

于 2014-11-27T10:27:13.190 に答える
0

JavaScriptでやりたい場合

const details = document.querySelector("details");
details.setAttribute("open", "");

html5の詳細タグ関連で次々開くjavascriptの機能がおかしい

于 2021-10-10T20:38:05.097 に答える