Rumah >hujung hadapan web >tutorial js >Pelaksanaan jQuery kod contoh fungsi menu lungsur

Pelaksanaan jQuery kod contoh fungsi menu lungsur

PHPzasal: 2016-05-16 15:01:482003semak imbas

Artikel ini terutamanya memperkenalkan maklumat yang berkaitan tentang kod contoh jQuery yang melaksanakan fungsi menu lungsur turun Rakan yang memerlukan boleh merujuknya.

Dengan seratus perkataan, mengapa tidak saya siarkan rendering untuk semua orang Sila lihat rendering di bawah:

Kodnya adalah seperti berikut: <.>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-color: skyblue;
    }
    .wrap li {
      background-color: skyblue;
    }
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      //获取所有li，添加移入事件
      $(".wrap>ul>li").mouseenter(function () {
        //设置内部的子元素ul slideDown
        $(this).children("ul").stop().slideDown(600);
      });
      //移出li时，让内部子元素slideUp
      $(".wrap>ul>li").mouseleave(function () {
        $(this).children("ul").stop().slideUp(600);
      });
      //如果当前运动没有完毕，又添加了新的动画，这时新的动画需要等待当前动画执行完毕才会开始
      //如果持续添加。一定会造成动画的积累，这种情况我们称为动画队列
    });
  </script>
</head>
<body>
<div>
  <ul>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单1</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单11</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单12</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单21</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单22</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单31</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单32</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Di atas adalah keseluruhan kandungan pelaksanaan jquery contoh fungsi menu lungsur turun.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery melaksanakan kesan fungsi kotak drop-down [kod contoh]_jqueryArtikel seterusnya：jquery melaksanakan kesan fungsi kotak drop-down [kod contoh]_jquery

Artikel berkaitan

Lihat lagi