-第3章 jQuery方法实现下拉菜单显示和隐藏

时间：2023-03-10 04:31:20
-第3章 jQuery方法实现下拉菜单显示和隐藏

知识点

  1. jquery 的引入方式
    • 本地下载引入
    • 在线引入
  2. children 只获取子元素，不获取孙元素
  3. show() 显示、 hide() 隐藏。

完整代码

<!--

Author: XiaoWen

Create a file: 2017-02-27 11:24:01

Last modified: 2017-02-27 17:16:06

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    #nav{

      background: #eee;

      width: 600px;

      height: 40px;

      margin: 0 auto;

    }

    ul{

      list-style:none;

    }

    ul li{

      float: left;

      line-height: 40px;

      text-align: center;

      position: relative;

    }

    a{

      text-decoration: none;

      color: #000;

      display: block;

      padding: 0 10px;

      height: 40px;

    }

    a:hover{

      color: #fff;

      background: #666;

    }

    ul li ul li{

      float: none;

      background: #eee;

      margin-top: 2px;

    }

    ul li ul{

      position: absolute;

      left: 0;

      top: 40px;

    }

    ul li ul li a{

      width: 80px;

    }

    ul li ul li a:hover{

      background: #06f;

    }

    ul li ul{

       display: none;

    }

    ul li:hover ul{

      /* display: block; */

    }

  </style>

</head>

<body>

<div id="nav">

  <ul>

    <li><a href="#">一级菜单1</a></li>

    <li><a href="#">一级菜单2</a></li>

    <li>

      <a href="#">一级菜单3</a>

      <ul>

        <li><a href="#">二级菜单1</a></li>

        <li><a href="#">二级菜单2</a></li>

        <li><a href="#">二级菜单3</a></li>

      </ul>

    </li>

    <li><a href="#">一级菜单4</a></li>

    <li><a href="#">一级菜单5</a></li>

    <li><a href="#">一级菜单6</a></li>

  </ul>

</div>

<script src="http://code.jquery.com/jquery.js"></script>

<script>

// $ 等于 jQuery

// $(function(){}) 等于 $(document).ready(function(){})

// 表示整个文档加载完成后再执行相应的函数。

  $(function(){

    // 选择器 > 表示子元素

    $('#nav>ul>li').mouseover(function(){

      // children 只获取子元素，不获取孙元素

      $(this).children('ul').show()

    })

    $('#nav>ul>li').mouseout(function(){

      $(this).children('ul').hide()

    })

  })

</script>

</body>

</html>

相关文章