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

原创 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>

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




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

相关文章推荐

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

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

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

【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单_网页代码站(www.webdm.cn) ...

actionbar竖向导航

  • 2015年08月13日 15:08
  • 3KB
  • 下载

jquery弹性竖向导航菜单特效插件

  • 2013年01月07日 21:51
  • 39KB
  • 下载

纯CSS菜单导航(三)竖向

Ajax竖向三级弹出菜单

多级竖向导航,可自定义

  • 2015年07月28日 12:35
  • 37KB
  • 下载

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

RadioGroup默认的横向android:orientation="horizontal"、竖向布局android:orientation="vertical",无法设置每行显示的个数,只能全部横...
  • AMinfo
  • AMinfo
  • 2012年05月11日 18:13
  • 51894

分类导航支持二级三级分类

分类导航运用CSS控制UpdatePane    .my_left_category { width: 130px; ...
  • j04535
  • j04535
  • 2011年09月30日 14:14
  • 318
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于竖向二级导航折叠问题
举报原因:
原因补充:

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