如何创建基于 JavaScript 的层叠导航系统

为了描述此基于 JavaScript 的导航系统，我们考虑以下 传统的按页面左侧导航系统（它使用几个 HTML5 语义元素）：传统的左侧导航 Traditional Left Nav #leftNav { border-right: 1px grey dashed; width: 9.5em; margin-left: -2em; } #leftNav ul { list-style: none; } #leftNav ul ul li { margin-left: -1.5em; } Home Portfolio Thumbnails Slide Show Tag Cloud 此标记呈现如下内容：因而，目标是将左侧导航的标记放置在 JavaScript 文件中并将该文件链接到需要左侧导航的页面中，如下所示： 如你所见，唯一剩下的与导航相关的标记就是 元素本身。假定前面的 DOM 结构（即，之前的 标记），调用 appendLiA('outerUL', 'home', 'home.html', 'Home') 导致： Home 现在，构建所有以下的左侧导航标记（不包括外部的 元素）： Home Portfolio Thumbnails Slide Show Tag Cloud 我们按照以下顺序调用这两个函数：appendUl('leftNav', 'outerUL'); appendLiA('outerUL', 'home', 'home.html', 'Home'); appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio'); appendUl('portfolio', 'portfolioUL'); appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails'); appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show'); appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud');注意，此代码示例中的第 4 行 appendUl('portfolio', 'portfolioUL') 允许嵌入缩略图和幻灯片：因此，若要将左侧导航系统注入任何网站页面，只需包含位于 标记之前的行 ，如以下 完整示例所示：层叠的左侧导航 Cascading Left Nav #leftNav { border-right: 1px grey dashed; width: 9.5em; margin-left: -2em; } #leftNav ul { list-style: none; } #leftNav ul ul li { margin-left: -1.5em; } 了解了 appendUl 和appendLiA，leftNav.js 的剩下内容就非常简单了：leftNav.jswindow.addEventListener('load', leftNav, false); function leftNav() { appendUl('leftNav', 'outerUL'); appendLiA('outerUL', 'home', 'home.html', 'Home'); appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio'); appendUl('portfolio', 'portfolioUL'); appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails'); appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show'); appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud'); function appendUl(append_to_id, ul_id) { /* Creates a element whose ID is ul_id. This element is then appended to the element whose ID is append_to_id. */ var ul = document.createElement('ul'); ul.id = ul_id; var appendTo = document.getElementById(append_to_id); appendTo.appendChild(ul); } // appendUl function appendLiA(append_to_id, li_id, a_href, a_text) { /* Creates two elements, an element and an element. The element's href attribute is set to a_href and its inner text to a_text. The element's ID becomes li_id and contains the element. The elements are then appended to the element whose ID is append_to_id. */ var a = document.createElement('a'); a.href = a_href; a.textContent = a_text; var li = document.createElement('li'); li.id = li_id; li.appendChild(a); var appendTo = document.getElementById(append_to_id); appendTo.appendChild(li); } // appendLiA } // leftNav从标记中可以看出，唯一增加复杂性的内容就是 leftNav 函数包装 appendUl 和appendLiA 以及通过 window.addEventListener('load', leftNav, false) 完全加载页面后紧接着调用 leftNav。