HTML 中语义正确的站点地图

Question

我正在尝试为我们的网站开发/设计主菜单/站点地图。

简而言之，菜单应该看起来像一个目录树，并且菜单上的每个项目都应该展开以显示更多菜单项或链接到网站上的另一个页面。

除此之外，每个项目都应该具有添加到站点“收藏夹”应用程序的功能，以便每个用户都能更快地找到隐藏在菜单结构深处的项目。

由于我疯狂的强迫症，以确保一切都正确完成并达到最佳标准，我在让我的标记在语义上正确且可访问时遇到了问题。

这是我目前所得到的：

<ul>
    <li>
        <ul>
            <li>
                <a href="example1.html">Collapse "Menu Item 1"</a>
            </li>
            <li>
                <a href="example2.html">Add "Menu Item 1" to Favourites</a>
            </li>
            <li>
                <a href="example1.html">Menu Item 1</a>
                <ul>
                    <li>
                        <ul>
                            <li>
                                <a href="example3.html">Open "Menu Item 1's
                                First Child"</a>
                            </li>
                            <li>
                                <a href="example4.html">Add "Menu Item 1's
                                First Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example3.html">Menu Item 1's First 
                                Child</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>
                                <a href="example5.html">Open "Menu Item 1's
                                Second Child"</a>
                            </li>
                            <li>
                                <a href="example6.html">Add "Menu Item 1's
                                Second Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example5.html">Menu Item 1's Second
                                Child</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example7.html">Expand "Menu Item 2"</a>
            </li>
            <li>
                <a href="example8.html">Add "Menu Item 2" to Favourites</a>
            </li>
            <li>
                <a href="example7.html">Menu Item 2</a>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example9.html">Open "Menu Item 3"</a>
            </li>
            <li>
                <a href="example10.html">Add "Menu Item 3" to Favourites</a>
            </li>
            <li>
                <a href="example9.html">Menu Item 3</a>
            </li>
        </ul>
    </li>
</ul>

如您所见，事情开始变得非常复杂非常很快。

这是传达此信息的最佳方式还是我把事情复杂化了？

你能想出一个更好的方法吗？

Answer 1

IMO 您使用此列表有误。折叠/打开/添加到收藏夹...这些元素不属于树，但您将它们视为树的一部分。

您的树应具有以下结构：

<ul>
  <li>
    <span>menu item 1<span>
    <ul>
      <li>
        <span>child node 1</span>
      </li>
      <li>
        <span>child node 2</span>
      </li>
    </ul>
  </li>
  ...
</ul>

那是树的根部。现在您应该添加操作（打开/添加...等）。它们可以作为另一个独立列表放置在span 元素之后。然后只需使用class 将 childNodes 列表与 actions 列表分开：

...
<li>
  <div>
    <span>menu item 1</span>
    <ul class="actions"> ... </ul>
  </div>
  <ul class="childNodes"> ... </ul>
</li>
...

嗯...理论上类不是必需的，但使用类而不是 ... ul > li > div > ul 选择器等更容易处理。

根据第一条评论

网站的基本功能不应依赖于 JavaScript。这就是为什么我使用 JS 添加整棵树是个坏主意。 add to favs 之类的操作应该在没有 JS 的情况下可用，但您可以随意控制该操作并覆盖它的功能。所以在 HTML 中你有：

<a href="/tree/action/add_to_favs?id=123">Add to favs</a>

但是使用 JS 你会做这样的事情（伪代码）：

actionLink.addEventListener("click", function...
  var id = take id: 123
  do ajax request here
  return false;
});

这是同时提供良好可用性和功能的最佳方式。

关于打开/折叠操作。这些本质上需要 JS，因此可以通过 JS 将它们添加到操作列表中。但是再一次……记住“非 JS 用户”。 HTML/CSS 应该显示一整棵树 - JS 应该折叠它的分支。

Answer 2

有时我会按照 Crozin 的上述回答进行操作，但在大型网站上可能无法加载如此大的树（我已经为页面超过 100k 的网站构建了系统）。

混合解决方案是在树中加载，这样到父页面的路径仅包含当前路径，然后显示父页面的所有子页面。然后添加 JavaScript 行为以添加树的附加部分。

这样做意味着非 JS 浏览可以完全浏览网站，但 JS 浏览可以获得增强功能，所有这些都不会影响构建整个树的性能。