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

最新推荐文章于 2024-04-01 01:16:06 发布

原创最新推荐文章于 2024-04-01 01:16:06 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #hide #slideToggle

web基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的下拉菜单案例，通过jQuery实现了菜单项的显示与隐藏功能，并对菜单项点击后的样式进行了动态调整。

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

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