知识点

  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>

-第3章 jQuery方法实现下拉菜单显示和隐藏的更多相关文章

  1. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  2. -第1章 HTMLCSS方法实现下拉菜单

    中英文的自动换行问题 把下面代码中的 javascript 改成 子菜单1 试试, 如果英文的话宽度会自动撑开, 用中文不会, 而直接转行下来. <ul> <li><a ...

  3. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  4. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  5. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  6. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  7. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  8. IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...

  9. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

随机推荐

  1. 怎样从外网访问内网IIS？

    本地安装了一个IIS,只能在局域网内访问,怎样从外网也能访问到本地的IIS呢?本文将介绍具体的实现步骤. 准备工作 安装并启动IIS 默认安装的IIS端口是80. 实现步骤 下载并解压holer软件包 ...

  2. STM32开发 -- 4G模块开发详解（转）

    STM32开发 -- 4G模块开发详解(1) STM32开发 -- 4G模块开发详解(2) STM32开发 -- 4G模块开发详解(3) STM32开发 -- 4G模块开发详解(4)

  3. RTSP 与 RTMP 协议 （转）

    源: RTMP协议与RTSP协议比较 RTSP 与 RTMP 协议 RTSP Spec中文版(1-11) RTSP协议 流媒体之rtsp篇 H264视频传输.编解码----RTSP协议

  4. CE教程

    https://www.52pojie.cn/thread-726510-1-1.htmlhttps://www.52pojie.cn/thread-726154-1-1.html https://w ...

  5. PHP结合Vue实现上拉分页

    效果图: <?php if(isset($_GET['data'])){ $data = [ [ 'title'=>1], [ 'title'=>2], [ 'title'=> ...

  6. encodeURI、encodeURIComponent

    encodeURI是对整个uri进行编码的,而encodeURIComponent是对uri中部分内容进行编码. 在进行url的字符串拼接时,需要进行两次encodeURI. 只进行一次encodeU ...

  7. django基础 -- 5. ORM 数据库操作

    一. ORM 对象关系映射 类   ------   表 类对象   ------   记录 类属性   ------   字段 二.  连接数据库配置 1.在  setting.py 文件中重新设置 ...

  8. topcoder srm 706 div1

    1.给定一个迷宫,点号表示不可行,井号表示可行.现在可以改变其中的一些井号的位置.问最少改变多少个井号可以使得从左上角到右下角存在路径. 思路:设高为$n$,宽为$m$,若井号的个数$S$小于$n+m ...

  9. Linux 系统/etc/profile 内配置 系统脚本命令

    背景 在Linux系统下,我们需要利用脚本命令启动一个进程的时候,需要先找到找到启动文件,然后再启动.比如服务器上安装了一个was应用服务器,我们需要每次启动服务器都需要使用如下命令: sh  was ...

  10. Python3基础 list pop 取出列表的最后一个元素

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...