bootstrap手风琴menu

最新推荐文章于 2024-05-14 09:55:02 发布

番茄鲨鱼面

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量882

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/xiakepan/article/details/50013187

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Bootstrap框架创建一个手风琴效果的菜单。通过简单的源码展示，详细解析了实现过程。

摘要由CSDN通过智能技术生成

利用bootstrap写了一个简单的菜单展示。

效果：

源码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">  
  <script src="jquery-2.1.4.js"></script>
  <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <style>
  	.container{
		margin:0 auto;
		width:800px;
		//background:gray;
	}
	.menuDiv{
		margin-bottom:2px;
	}
  </style>
  <script>
	$(function(){
		$(".menuG").click(function(){
			var ss = $(this).siblings();
			var sec = 500;
			if(ss.length>0 && ss.siblings().eq(1).css("display")=='block'){
				$(this).children("span").removeClass("glyphicon-chevron-up");
				$(this).children("span").addClass("glyphicon-chevron-down");
				ss.each(function(i,item){
					sec += 200;
					$(item).hide(sec);
				});
			}else{
				$(this).children("span").removeClass("glyphicon-chevron-down");
				$(this).children("span").addClass("glyphicon-chevron-up");
				ss.each(function(i,item){
					sec += 200;
					$(item).show(sec);
				});
			}
			
		});
  });
  </script>
</head>
<body>
<div class="container">
<div class="list-group menuDiv">
  <a href="javascript:void(0)" class="list-group-item menuG active">
    Cras jto odio
	  <span class="glyphicon glyphicon-chevron-up" aria-hidden="true" style="float:right"></span>
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="list-group menuDiv">
  <a href="javascript:void(0)" class="list-group-item menuG active">
    Cras jto odio
	  <span class="glyphicon glyphicon-chevron-up" aria-hidden="true" style="float:right"></span>
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<div class="list-group menuDiv">
  <a href="javascript:void(0)" class="list-group-item menuG active">
    Cras jto odio
	  <span class="glyphicon glyphicon-chevron-up" aria-hidden="true" style="float:right"></span>
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
</body>
</html>

番茄鲨鱼面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap手风琴menu

利用bootstrap写了一个简单的菜单展示。效果：源码： .container{ margin:0 auto; width:800px; //background:gray; } .menuDiv{ margin-bottom:2px; } $(function(){ $(".me
复制链接

扫一扫

专栏目录