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

最新推荐文章于 2023-03-26 21:56:40 发布

原创最新推荐文章于 2023-03-26 21:56:40 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#导航

本文探讨了在实现竖向二级导航时遇到的折叠问题，重点在于如何处理第二次点击时二级导航的收起效果。内容涉及自定义方法及其存在的不足。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>

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