JS 实现伸缩菜单

最新推荐文章于 2024-06-28 22:39:15 发布

小卷不卷

最新推荐文章于 2024-06-28 22:39:15 发布

阅读量1k

点赞数 3

分类专栏： html js 文章标签： javascript 前端开发语言

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

版权

js 同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

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

直接放代码：

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 样式最终实现伸缩菜单。

效果图：

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

小卷不卷

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 实现伸缩菜单

使用三种方法实现伸缩菜单直接放代码：html 代码和 style 代码js代码（1）：js代码（2）：js代码（3）：注：btns[i].onclick=function(){} 通过遍历给每个按钮赋予点击事件，再通过遍历找到你所点击的按钮的下标，最后通过divs[index].classList.toggle("open"); 改变每个 divs[index] 的样式，赋予 open 样式最终实现伸缩菜单。效果图：如果有不懂的，可以留言。...
复制链接

扫一扫

专栏目录