简单折叠菜单制作一

最新推荐文章于 2021-12-08 09:34:04 发布

多多果果木

最新推荐文章于 2021-12-08 09:34:04 发布

阅读量730

点赞数

分类专栏： code 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_36570417/article/details/107551285

版权

网上没找到满意的菜单代码（大佬做的加了太多东西，有点看不懂,修改起来太麻烦了），只好自己重新撸了个简洁的。用的是bootStrap和jQuery，暂时比较简陋，后面慢慢完善。演示如下：

菜单演示

首先网页需要引入bootstrap，jQuery

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

js代码如下：

<script type="text/javascript">
			$(document).ready(function(){
   
				//active指向有.active样式的元素
				let active=$(".active");
				//菜单被点击时执行； $(".list-group-item")选中菜单元素
			  $(".list-group-item").click(function(){
   
				  //移除之前元素的选中样式，为被点击的菜单添加选中样式
				 active.removeClass("active");
			    $(this).addClass("active");
				active=$(this);//active指向当前被选中的菜单
			  });
			});
		</script>