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

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

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




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

二级收缩菜单,点击出现二级菜单

公司后台管理 function re_load() { location.reload(); } function left_menu(m) {   var left_n=(m);   ...
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:56
  • 236

Layui前端框架导航栏使用介绍

LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏...
  • ahou2468
  • ahou2468
  • 2017年05月12日 15:25
  • 6678

layer问题解决1--二点击菜单第二次不请求后台问题解决方案

加上这句话就行了,如果此选项卡存在,先删除选项卡再添加,就可以了。
  • u012164393
  • u012164393
  • 2017年05月05日 23:11
  • 574

十天学会web标准(DIV+CSS)系列(四)纵向导航菜单及二级弹出菜单

一、纵向列表 纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作 先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中...
  • jarniyy
  • jarniyy
  • 2016年03月21日 11:24
  • 735

DIV+CSS制作二级导航菜单(纵向)

html> html lang="en"> head> meta charset="UTF-8"> title>制作二级导航菜单(纵向)title> style type="t...
  • pangqiandou
  • pangqiandou
  • 2017年10月24日 12:38
  • 574

Layui自定义模块基础学习

新手刚刚接触layui,在自定义自己的layui模块的时候废了半天劲,最终终于定义了一个模块成功了,特此做此记录 步骤如下: 第一步:新建一个js文件,目录自选(该实例实在项目的根目录下新建一个MyD...
  • jialijuan521_zhang
  • jialijuan521_zhang
  • 2017年06月21日 23:35
  • 4136

使用layui做二级菜单,选父级必选子级

html中有lay-filter选择器&lt;th&gt;&lt;input type="checkbox"  name="sel" l...
  • qq_40393093
  • qq_40393093
  • 2018年02月08日 09:55
  • 49

JS之三级竖向展开/收缩导航菜单

JS之三级竖向展开/收缩导航菜单
  • netuser1937
  • netuser1937
  • 2017年02月07日 16:45
  • 735

html用js实现导航栏的二级菜单,自动伸缩。。。

效果图::、 代码如下:: 动画菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #3...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月12日 16:09
  • 4864

layui自定义ajax左侧三级菜单

HTML代码: 需引入layui.css代码 ...
  • zy1281539626
  • zy1281539626
  • 2017年03月20日 10:49
  • 7579
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于竖向二级导航折叠问题
举报原因:
原因补充:

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