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

需求说明

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

实现思路

在页面中添加 ul 标签 用来显示无序列表。在 ul 标签下添加两个 li 标签 用来显示列表内容在 li 标签下添加两个 div 标签 第一个显示一级列表的内容 第二个显示二级列表的内容第二个 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;

 list-style: none outside;

 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 

 div class t a href # 图书畅享榜 /a /div 

 div class txt 

 p a href # 我喜欢生命本来的样子 /a /p 

 p a href # 雪落香杉树 /a /p 

 /div 

 /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 

jquery点击按钮或链接，第一次与第二次执行不同的事件 本文和大家分享一个jquery的实例，这个实例实现的是点击网页里的按钮或链接，第一次和第二次会执行不同的事件，也就是两个事件会轮流执行。