Css dl dt dd标签-我们可以在dd之间添加任何标签吗？

我的菜单是用标签设计的一、二，。。。是菜单项。”“标题”是菜单标题

<dl>
    <dt>Header</dt>
    <dd>One</dd>
    <dd>Two</dd>
    <dd>Three</dd>
    <dd>Four</dd>
    <dd>Five</dd>
</dl>

---

我建议将以下内容作为HTML结构：

<dl>
    <dt>Header</dt>
    <dd>
       <ul>
          <li>One</li>
          <li>Two</li>        
          <li>Three</li>
          <li>Four</li>
          <li>Five</li>
       </ul>
    </dd>
</dl>

标题

一个
两个
三
四
五

您的术语（

dt

）应该只有一个定义（

dd

）。

标签是三个元素之一，用于创建定义列表。即它们不适合创建菜单
像这样试试

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>






您只需识别单击的定义术语，然后循环它的同级项，直到找到非定义描述的内容

例如：

document.querySelector('dl').addEventListener('click', function(e) {
    var t = e.target;
    var n,
    style;

    if (t.tagName.toLowerCase() == 'dt') {
        n = t.nextElementSibling;
        style = n.style.display === "none" ? "block": "none";
        while (n) {
          console.log(n);
            if (n.tagName.toLowerCase() == 'dd') {
                n.style.display = style;
            } else {
                break;
            }
            n = n.nextElementSibling;
        }
    }
});

请注意，您的标记比idea少。如果您想要一个菜单项列表以及与之关联的另一个子菜单项列表，请使用嵌套列表（子列表应位于列表项元素中）。
不太清楚：额外的div应该如何解决此问题？你为什么要用那个标记？在你的div上的Jquery/Javascript中，它似乎根本不是一个描述listuse Toggle（）。@nicael-正确的回答是像我做的那样编辑它：-）不。每个
dt
后面都可以跟多个
dd
s。看，特别是那些例子，证明了这一点。你的方法是完美的。还通过了w3c验证。不正确-它们适合创建菜单，但是开发人员通常使用嵌套无序列表。也许你的意思是“仅仅因为你能做一些事情，并不意味着你应该……”：-）使用
dl
作为菜单可能是不可靠的，除非在特定情况下。因此，“它们不适合创建菜单”的说法可能是正确的。
document.querySelector('dl').addEventListener('click', function(e) {
    var t = e.target;
    var n,
    style;

    if (t.tagName.toLowerCase() == 'dt') {
        n = t.nextElementSibling;
        style = n.style.display === "none" ? "block": "none";
        while (n) {
          console.log(n);
            if (n.tagName.toLowerCase() == 'dd') {
                n.style.display = style;
            } else {
                break;
            }
            n = n.nextElementSibling;
        }
    }
});