您的位置：首页 > Web前端 > JQuery

JavaScript/jquery:利用hide和slideToggle做简单的二级菜单

2017-05-07 21:45 369 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">
ul{
list-style: none;
display: none;
}
div{
width: 200px;
height: 50px;
border: 1px solid red;
background: #ccc;
text-align: center;
line-height:50px;
position: relative;
top: 10px;
left: 800px;
}

.u{
padding:0;
width:200px;
list-style-type:none;
display: none;
border: 1px solid;
position: relative;
top: 1px;
left: 800px;

}

li{
width:200px;
height:40px;
line-height:40px;
text-align:center;
float:left;
background-color:gray;
}
.a{
display:inline-block;
width:100%;
height:100%;
text-decoration:none;
}
.a:hover{
background-color:orange;
}

.active{
background-color:red;
}

</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".a").click(function(){
$(".a").removeClass("active");/二级菜单点击后背景色改变
$(this).addClass("active");
});
$(".du").click(function(){
var tt=$(this).attr("id");
var ttId=tt.replace("div","tt");
$("#"+ttId).blur(function(){
var idValue=$(this).attr("id");
var trIdValue=idValue.replace("b","tr");
$("#"+trIdValue).hide(10);//闭合
});
});

$(".du").click(function(){
$("#ul1").slideToggle(1000);//展开
});

$("#div2").click(function(){
$("#ul2").slideToggle(1000);
});

$("#div3").click(function(){
$("#ul3").slideToggle(1000);
});
});

</script>

</head>

<body>
<table style="width:600px">
<tr id="tt1"><td><div class="du" id="div1">一级菜单</div>
<ul id="ul1" class="u" >
<li class="a">菜单1</li>
<li class="a">菜单2</li>
<li class="a">菜单3</li>
<li class="a">菜单4</li>
<li class="a">菜单5</li>
</ul></td>
</tr>
<tr id="tt2"><td><div class="du" id="div2">一级菜单</div>
<ul id="ul2" class="u" >
<li class="a">菜单1</li>
<li class="a">菜单2</li>
<li class="a">菜单3</li>
<li class="a">菜单4</li>
<li class="a">菜单5</li>
</ul></td>
</tr>

<tr id="tt3"><td><div class="du" id="div3">一级菜单</div>
<ul id="ul3" class="u" >
<li class="a">菜单1</li>
<li class="a">菜单2</li>
<li class="a">菜单3</li>
<li class="a">菜单4</li>
<li class="a">菜单5</li>
</ul></td>
</tr>
</table>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript hide slideToggle

相关文章推荐

新的分享

章节导航