js二级菜单如何实现隐藏循环
.html文件<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><htmlxmlns="http://www...
.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{模 板}</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css2.css" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="sidebar">
<div class="nav">
<ul>
<li><a href="">一级菜单1</a>
<ul class="hide">
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul class="hide">
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
</ul>
</li>
<li><a href="#">一级菜单3</a>
<ul class="hide">
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
</ul>
</li>
<li><a href="#">一级菜单4</a>
<ul class="hide">
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单41</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
js.js
$(document).ready(function () {
$('#sidebar .nav ul').mouseenter(function () {
$(this).children().children().removeClass('hide');
});
}); 展开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{模 板}</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css2.css" />
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="sidebar">
<div class="nav">
<ul>
<li><a href="">一级菜单1</a>
<ul class="hide">
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
<li><a href="#">二级菜单1</a> </li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul class="hide">
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
<li><a href="#">二级菜单2</a> </li>
</ul>
</li>
<li><a href="#">一级菜单3</a>
<ul class="hide">
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
<li><a href="#">二级菜单3</a> </li>
</ul>
</li>
<li><a href="#">一级菜单4</a>
<ul class="hide">
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单4</a> </li>
<li><a href="#">二级菜单41</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
js.js
$(document).ready(function () {
$('#sidebar .nav ul').mouseenter(function () {
$(this).children().children().removeClass('hide');
});
}); 展开
展开全部
思路：
1、监听鼠标移入移出事件的方式进行显示和隐藏
2、通过hover伪类的css方式进行
推荐用第二种方式，这样比较精确而且容易设置
举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蓝色理了个想</title>
<style>
.wrap{}
.wrap .box{border:2px solid red;width:200px;height:200px;float:left;margin-right: 10px;margin-bottom: 10px;}
.wrap .box:hover h1{display:block;}
.wrap .box h1{background:#333;color:white;display:none;}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<h1>明天还爱我</h1>
</div>
<div class="box">
<h1>东北松花江</h1>
</div>
<div class="box">
<h1>希望的田野</h1>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(this).children().children().removeClass('hide');这句话是想要移除所有<ul class="hide">标签的样式吗？直接$(".hide").removeClass("hide");不就行了，不用循环啊
更多追问追答
追问
一级菜单有多个，鼠标移动后，二级要增加hide，同时相应移除hide
一级菜单有多个，鼠标移动后，二级要增加hide，同时相应移除hide
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
