js内嵌菜单 html,html：原生javascript+css实现折叠层级菜单

最新推荐文章于 2025-01-14 22:33:39 发布

转载最新推荐文章于 2025-01-14 22:33:39 发布 · 597 阅读

文章标签：

#js内嵌菜单 html

本文介绍如何使用原生JavaScript和CSS创建网页的折叠层级菜单。通过定义不同状态并利用JavaScript的单击响应函数切换状态，实现菜单的展开与折叠，同时运用排他思想确保菜单间互斥。代码示例展示了详细实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

今天来跟大家分享一下如何制作一个网页中的左侧菜单，这个功能对于网页来说也是常用的功能之一，相当于书签一样的功能。那么今天我们就来说一说如何实现一个折叠层级菜单的功能。

那么折叠层级菜单长什么样？下面我们来直观的看一下，如下图所示就是一个简单的层级菜单，共有四个菜单选项，选择哪一个选项就对应地菜单下面相应的内容，如下截图所示：

2b0a22acad35

那么对于这样的层级菜单如何实现呢？用原生的javascript+css就可以来实现，而且实现起来也不是很难，这里主要是通过用css对菜单定义两种状态，一个用于折叠时显示，另一个用于展开时显示，而这两个状态的切换则使用JavaScript的单击响应函数来完成。在用JavaScript做状态切换时，我这里使用的是排他思想，也就当前点击的菜单是一种状态，其他的都是另一种状态，而实现排他思想的手段则是双重for循环和自定义属性。下面来看一下具体如何实现吧，具体代码如下：

折叠层级菜单

body{margin: 0;text-align: center;}

#mymenu {display: inline-block;margin:50px 100px 0 0;text-align: left;width: 23%;}

#mymenu div{overflow: hidden;border-bottom: 10px solid #fff;}

.menuspan{display: block;overflow: hidden;text-align: left;background-color: #d5a6bd;color: #ffffff;padding-left: 10px;height: 25px;line-height: 25px;}

.menuspan:hover {color: grey;text-decoration: underline;}

#mymenu a {display: block;padding-left: 30px;}

#mymenu a:hover {color: grey;text-decoration: underline;}

#mymenu div.collapsed{height: 25px;}

window.onload = function(){

function hasclass(obj,clsname){

var reg = new RegExp('\\b'+clsname+'\\b');

return reg.test(obj.className);

}

function addclass(obj,clsname){

if(!hasclass(obj,clsname)){

obj.className += ' ' + clsname;

}

function removeclass(obj,clsname){

var reg = new RegExp('\\b'+clsname+'\\b');

obj.className = obj.className.replace(reg,'');

}

function toggleclass(obj,clsname){

var reg = new RegExp('\\b'+clsname+'\\b');

if(hasclass(obj,clsname)){

removeclass(obj,clsname);

}else{

addclass(obj,clsname);

}

function getstyle(obj, styname) {

if(window.getComputedStyle){

return getComputedStyle(obj,null)[styname];

}else{

return obj.currentStyle[styname];

}

var menuspan = document.querySelectorAll('.menuspan');

for(var i=0;i < menuspan.length;i++){

menuspan[i].index = i;

menuspan[i].onclick = function(){

var parentdiv = this.parentNode;

toggleclass(parentdiv,'collapsed');

for(var j=0;j< menuspan.length;j++){

var otherdiv = menuspan[j].parentNode;

if(this.index != menuspan[j].index){

addclass(otherdiv,'collapsed');

}

在线工具

支持我们

合作伙伴

测试电流

上面的代码实现了折叠层级菜单的功能，共有四个主菜单，每个菜单下又隐藏若干子菜单，当单击某个菜单时会打开该菜单下面的子菜单，再次单击该菜单会隐藏下面的子菜单，还有就是菜单之间是互斥的，即打开一个菜单会关闭其他的菜单。最终效果如下所示：

2b0a22acad35

最后

对于折叠层级菜单，网上的很多帖子都是使用 jQuery库来实现，而本贴使用的是原生JavaScript+css结合双重for手段来具体实现。emm，今天就分享到这里了。