关于竖向二级导航折叠问题

原创 2016年06月01日 22:37:05

自己用的方法,不能实现第二次点击的时候折叠二级导航:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
			<ul class="nav">
				<li class="menulist1"><a href="#">精选品牌</a>
				  <ul class="list list2">
				   	<li><a href="#">兰芝</a></li>
				   	<li><a href="#">御泥坊</a></li>
				   	<li><a href="#">珀莱雅</a></li>
				   	<li><a href="#">相宜本草</a></li>
				  </ul>
				</li>
				<li class="menulist2"><a href="#">热门功效</a>
					<ul class="list list1">
						<li><a href="#">去黑头</a></li>
						<li><a href="#">专业洗护</a></li>
						<li><a href="#">强力去屑</a></li>
						<li><a href="#">多芬男士</a></li>
					</ul>
				</li>
				<li class="menulist3"><a href="#">面部护理</a>
					<ul class="list list3">
						<li><a href="#">美即面膜</a></li>
						<li><a href="#">亚缇克兰</a></li>
						<li><a href="#">雅思兰黛</a></li>
						<li><a href="#">温碧泉</a></li>
					</ul>
				</li>
				<li><a href="#">身体护理</a></li>
				<li><a href="#">口腔护理</a></li>
				<li><a href="#">清洁用品</a></li>
			</ul>
			<script>
				$(function(){
					$(".menulist1").click(function(){
						$(".list").slideDown(700);
						$(".list1").hide();
						$(".list3").hide();
					});
					$(".menulist2").click(function(){
						$(".list1").slideDown(700);
						$(".list2").hide();
						$(".list3").hide();
					});
					$(".menulist3").click(function(){
						$(".list3").slideDown(700);
						$(".list1").hide();
					});
				});
后面找到一种可以折叠的方法,但是是利用dl创建的导航:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<script>
			$(function(){
			    $("#mymenu dd").hide();
			    $("#mymenu dt").click(function(event) {
			        var index = $("#mymenu dt").index(this);
			        var objList = [];
			        var tmpDD = $("#mymenu dt").eq(index).next();
			        while(tmpDD.length>0 && tmpDD.get(0).tagName == 'DD'){
			              objList.push(tmpDD);
			              tmpDD = tmpDD.next();
			        }
			        var display = $(objList[0]).css('display');	
			          if(display == 'none') {
			              $("#mymenu dd").hide();
			              $(objList).each(function() {
			                  $(this).show();
			              });
			          }else{
			              $(objList).each(function() {
			                  $(this).hide();
			              });
			          }
			    });
			});
		</script>
		<div id="mymenu">
		  <dl>
		    <dt><a href="#">精选品牌</a></dt>
		    <dd><a href="#">兰芝</a></dd>
		    <dd><a href="#">御泥坊</a></dd>
		    <dd><a href="#">珀莱雅</a></dd>
		    <dd><a href="#">相宜本草</a></dd>
		    <dt><a href="#">热门功效</a></dt>
		    <dd><a href="#">去黑头</a></dd>
		    <dd><a href="#">专业洗护</a></dd>
		    <dd><a href="#">强力去屑</a></dd>
		    <dd><a href="#">多芬男士</a></dd>
		    <dt><a href="#">面部护理</a></dt>
		    <dd><a href="#">美即面膜</a></dd>
		    <dd><a href="#">亚缇克兰</a></dd>
		    <dd><a href="#">雅思兰黛</a></dd>
		    <dd><a href="#">温碧泉</a></dd>
		    <dt><a href="#">身体护理</a></dt>
		    <dd><a href="#">纤体塑形</a></dd>
		    <dd><a href="#">阿迪达斯</a></dd>
		    <dd><a href="#">美容美体</a></dd>
		    <dd><a href="#">浴盐</a></dd>
		    <dt><a href="#">口腔护理</a></dt>
		    <dd><a href="#">电动牙刷</a></dd>
		    <dd><a href="#">云南白药</a></dd>
		    <dd><a href="#">防蛀固齿</a></dd>
		    <dd><a href="#">儿童牙刷</a></dd>
		    <dt><a href="#">清洁用品</a></dt>
		    <dd><a href="#">五月花</a></dd>
		    <dd><a href="#">恒安纸业</a></dd>
		    <dd><a href="#">威猛先生</a></dd>
		    <dd><a href="#">泉林本色</a></dd>
		    
		  </dl>
		</div>
	</body>
</html>

先放这里,到时候来修改下自己的看能不能达到效果




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单

【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单_网页代码站(www.webdm.cn) <!-- body,ul,ol,li,dl,dt,dd,h1{ margin:0; p...

竖向二级菜单实例+横向菜单/Table

纵向二级菜单 $(document).ready(function() { $("#menu").find("li").each...
  • L0veIT
  • L0veIT
  • 2012-09-13 15:19
  • 1256

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

纯CSS菜单导航(三)竖向

Ajax竖向三级弹出菜单

Android RadioGroup中横向、竖向布局RadioButton的问题

RadioGroup默认的横向android:orientation="horizontal"、竖向布局android:orientation="vertical",无法设置每行显示的个数,只能全部横...
  • AMinfo
  • AMinfo
  • 2012-05-11 18:13
  • 51271
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)