使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

查看本章节

查看作业目录


需求说明:

使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

实现思路:

  1. 在页面中添加<ul> 标签,用来显示无序列表。在<ul> 标签下添加两个<li> 标签,用来显示列表内容
  2. 在<li> 标签下添加两个<div> 标签,第一个显示一级列表的内容,第二个显示二级列表的内容
  3. 第二个<div> 标签默认为隐藏状态,点击列表的项,切换二级列表的显示或隐藏状态

实现代码:

核心代码:

<script type="text/javascript">
$(function(){
$(".t").click(function(){
var children = $(this).siblings(".txt")
// children.toggle();
if(children.is(":hidden")){
children.show();
}else{
children.hide();
}
})
})
</script>

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-size: 14px;
}
ul{
list-style: none outside;
}
a{
text-decoration: none;
color: #696969;
}
a:hover{
text-decoration: none;
color: #ff6637;
}
.left_nav{
border: 1px solid #e6e6e6;
overflow: hidden;
margin: 30px;
width: 190px;
}
.left_nav li{
border-top: 1px dashed #e7e7e7;
}
.left_nav li .t{
height: 50px;
line-height: 50px;
padding: 0 0 0 18px;
position: relative;
}
.left_nav li .txt{
padding: 0 0 0 18px;
display: none;
border-top: 1px dashed #e7e7e7;
}
</style>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".t").click(function(){
var children = $(this).siblings(".txt")
// children.toggle();
if(children.is(":hidden")){
children.show();
}else{
children.hide();
}
})
})
</script>
</head>
<body>
<div class="left_nav">
<ul>
<li>
<div class="t"><a href="#">图书畅享榜</a></div>
<div class="txt">
<p><a href="#">我喜欢生命本来的样子</a></p>
<p><a href="#">雪落香杉树</a></p>
</div>
</li>
<li>
<div class="t"><a href="#">新书畅享榜</a></div>
<div class="txt">
<p><a href="#">余生很长,何必慌张</a></p>
<p><a href="#">你那么懂事,一定很辛苦吧</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
上一篇:【转】selenium技巧 - 通过js来控制滚动条,通过xpath定位最上层的div层


下一篇:【转】linux中的sort命令