JS 实现伸缩菜单

大大源码 • 2023年3月8日 am12:53 • 未分类

使用 三种方法 实现伸缩菜单

直接放代码：

html 代码和 style 代码

<style>
			button{
				width: 100px;
				height: 20px;
				display: block;
			}
			div{
				width: 100px;
				height: 0px;
				background-color: chocolate;
				transition: all 0.5s;
				overflow: hidden;
				/* display: none; */
			}
			.close{
				height: 0;
			}
			.open{
				height: 100px;
			}
			
		</style>

<body>
	<button>切换</button>
    <div></div>	
</body>

js代码（1）：

<script>
	var btn=document.querySelector("button");
	var div=document.querySelector("div");
    btn.onclick=function(){
		div.classList.toggle("close");
	}
</script>

js代码（2）：

var btn=document.querySelector("button");
var div=document.querySelector("div");
var flag=true;
btn.onclick=function(){
if(flag){
	flag=!flag;
	div.style.height=0+"px";
}else{
	flag=!flag;
	div.style.height=100+"px";
    }
}

js代码（3）：

<body>
    <button>菜单1</button>
	<div>内容1</div>
	<button>菜单2</button>
	<div>内容2</div>
	<button>菜单3</button>
	<div>内容3</div>
</body>
<script>
	var btns=document.querySelectorAll("button");
	var divs=document.querySelectorAll("div");
	for (var i = 0; i < btns.length; i++) {
		btns[i].onclick=function(){
		    var index=-1;
			//获取下标
			for (var j = 0; j < btns.length; j++) {
				if(btns[j]===this){
					index=j;
					break;
				}
			}
			console.log(index);
			divs[index].classList.toggle("open");
		}
	}
</script>

注：btns[i].οnclick=function(){} 通过遍历给每个按钮赋予点击事件，再通过遍历找到你所点击的按钮的下标，最后通过divs[index].classList.toggle("open"); 改变每个 divs[index] 的样式，赋予 open 样式最终实现伸缩菜单。

效果图：

如果有不懂的，可以留言。

原文链接：https://blog.csdn.net/Youareseeing/article/details/125449974

THE END

大大搜源码

搜索内容

JS 实现伸缩菜单