Question

我的菜单设计有dl dt dd个标签。＆＃39; One＆＃39;，＆＃39; two＆＃39; ...是菜单项。＆＃39;头＆＃39;是菜单标题。

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

我的问题是，如果点击Header标记，则应隐藏＆＃39; One＆＃39;，＆＃39;两个＆＃39; ..选项。为此，我在div中添加了dd个选项。我知道在dl中不允许添加div。我怎么解决这个问题？感谢

<dl>
    <dt>Header</dt>
    <div id="menuOptions">
    <dd>One</dd>
    <dd>Two</dd>        
    <dd>Three</dd>
    <dd>Four</dd>
    <dd>Five</dd>
    </div>
</dl>

Answer 1

我推荐以下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>

您的学期（dd）应该只有1个定义（dt）。

Answer 2

<dl>标记是三个元素之一<dl>，<dt>，<dd>，用于创建定义列表。即它们不适合创建菜单试试这个

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

Answer 3

您只需要识别单击的定义术语，然后循环其兄弟姐妹，直到您达到不是定义描述的内容。

例如：

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;
        }
    }
});

请注意，您的标记不如想法。如果您想要一个菜单项列表以及与其关联的另一个子菜单项列表，则使用嵌套列表（子列表应该在列表项元素中）。

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

3 个答案: