Javascript 如何构造此菜单

我正在处理一个菜单（使用indesign制作的图像，还不是html）：

某些菜单选项将加载另一个div（其旁边的列）中的内容。 但是，对于“内容”选项，我需要一个新的选项列表，如下所示：

它应该会瓦解“内容”的东西

Atm都是用jquery/javascript完成的，所以它是动态的（例如加载另一本书）。 我想知道内容菜单， 我应该在包含两行表格的内容中放置一个div吗？ 一个表格用于罗马数字，一个表格用于章节名称。 还是很难与无序的列表结合起来

---

我知道您希望将罗马数字和章节名称放在一个列表元素中，并且正在查看表格作为解决方案

你当然可以用桌子。或者，可以使用具有固定宽度的跨度图元

我用

span

保存罗马数字

<ul>
    <li> <span class="num">I</span> Hello World </li>
    <li> <span class="num">II</span> The Second string </li>
    <li> <span class="num">III</span> 3 times, is a charm! </li>

</ul>

jsfiddle：

希望这能回答你的问题

我应该在包含两行表格的内容中放置一个div吗？一个表格用于罗马数字，一个表格用于章节名称

我猜你指的是两列？
你怎么能确定一章正好占一行呢？它们相当长，如果其中一个占了2行会发生什么，如果用户没有您在字体系列中指定的字体，并且回退更大，会发生什么？根据W3C/WAI WCAG 2.0关于可访问性的建议，如果他将（文本）缩放1、2到6级会怎么样

2列这样的专栏也意味着（想象一个屏幕阅读器用户听到1、2、3、4等，然后只听到第1、2、3、4等章的名字祝你好运！）

还是很难与无序的列表结合起来

不，不是。查看仅使用叠瓦列表的位置和（等待）CSS表布局。语义仍然是子列表中的一个，但在视觉上（并且仅在视觉上），它就像一个由行和单元格组成的表

---

好的方面是，你不必强制宽度。像

XVIII

这样的罗马数字相当大，但是浏览器中的表格算法将适应内容（只要您不将表格算法切换为

表格布局：固定的

），就像切换HTML表格一样。

您确定JSFIDLE满足您的要求吗？谢谢您的回答。我不喜欢缩放或没有字体的用户。这是一个学校作业，所以没有必要让它100%完美，因为它只会显示在我的手机上。JSFIDLE真的很有帮助，不知道它能做得这么好。哦，是的，隐藏/取消隐藏内容的简单方法是什么？我只使用jQuery（

.on（）

和“单击”+关注jQuery 1.7 with.hide（）/.show（）或添加/删除样式相同的类），所以我的答案非常有限

li span.num {
    display: inline-block;
    width: 30px;
}