Question

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

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

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

由于我疯狂的OCD确保一切都正确完成并达到了最佳标准，因此我遇到了使标记在语义上正确且易于访问的问题。

这是我到目前为止所得到的：

<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添加整棵树是个坏主意。像添加到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的回答做，但在大型网站上加载这么大的树是不可能的（我为超过10万页的网站建立了系统）。

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

以这种方式做事意味着非JS浏览可以完全导航网站，但JS浏览获得增强功能，所有这些都没有构建整个树的性能。

在HTML中语义正确的站点地图

2 个答案:

根据第一条评论