Question

我需要一个静态菜单，用户可以切换隐藏/可见状态，UI应该记住状态。

菜单位于左侧，如下所示：

  Link
> Menu
v Open Menu
    Sub Menu

这意味着在浏览器历史记录中来回切换应该恢复菜单状态，就像页面离开时一样。菜单中的更改不应在浏览器历史记录中注册，只应点击实际链接。

Answer 1

我相信你可以称之为“树视图”。

为了在客户端实现类似树视图的Web控件，您需要JavaScript，因为原始（X）HTML和CSS与此无关。

如果你有机会使用JavaScript库，你想知道jQuery有很多插件来完成这样的任务。在谷歌寻找他们，你会发现这样的：

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

关于州管理的另一个话题，我相信你需要自己解决方案，看来你有两个选择：

客户端：使用Cookie，您可以存储一些表示树视图层次结构的JSON，并使用布尔值标记每个级别和项目，以便您可以迭代此树并在页面刷新和状态之间恢复状态回传。
服务器端：我几乎没有机会建议具体的解决方案，因为我不知道您目前在项目中使用的是哪种服务器技术，但是需要在服务器逻辑中模仿客户端解决方案，将这种层次结构存储在某个会话或视图状态管理中，并发送客户端解决方案的JSON，但是从服务器端执行一些客户端状态的JavaScript恢复功能。

Answer 2

如果您希望使用JavaScript非常简单的树状菜单，请尝试使用此代码。

<html>
<head>
<title>Sample HTML Tree Menu</title>
<style type="text/css">
a {
  color: black;
  text-decoration: none;
}
div {
  display: inline-block;
  _display: inline;
}
</style>
<script language="JavaScript">
//<![CDATA[
function treeMenu(treeName) {
  branch = document.getElementById(treeName + "_branch").style;
  icon = document.getElementById(treeName + "_icon")
  if(branch.display == 'none') {
    branch.display = "block";
    icon.innerHTML = "v";
  } else {
    branch.display = "none";
    icon.innerHTML = ">";
  }
}
//]]>
</script>
</head>
<body>
<a href="javaScript:treeMenu('menu1')"><div id="menu1_icon">&gt;</div> Menu 1</a><br/>
<div id="menu1_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu2')"><div id="menu2_icon">&gt;</div> Menu 2</a><br/>
<div id="menu2_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
<A href="javaScript:treeMenu('menu3')"><div id="menu3_icon">&gt;</div> Menu 3</a><br/>
<div id="menu3_branch" style="display:none">
&nbsp;&nbsp;&nbsp;+ Sub Menu 1<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 2<br/>
&nbsp;&nbsp;&nbsp;+ Sub Menu 3<br/>
</div>
</body>
</html>

静态HTML菜单

2 个答案: