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

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

需求说明:


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


69.png

实现思路:


  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>
相关文章
N..
|
18天前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
10 1
|
23天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
11 0
|
3月前
|
机器学习/深度学习 JavaScript
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
39 1
|
22天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
9 0
|
23天前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
18 0
|
3月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
20 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
3月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
20 0
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0