知识点

  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. HashMap 和 ConcurrentHashMap比较

    基础知识: 1. ConcurrentHashMap: (JDK1.7) segment数组,分段锁:segment 内部是 HashEnty数组,类似HashMap: 统计长度的方法,先不加锁统计两 ...

  2. 解读 JavaScript 之引擎、运行时和堆栈调用

    https://www.oschina.net/translate/how-does-javascript-actually-work-part-1 随着 JavaScript 变得越来越流行,很多团 ...

  3. react+redux+react-router+node.js 开发实时聊天App 学习记录

    一.课程导学 1.React 主要解决的是UI层的问题,应用的状态需要借助Redux等状态管理. 2.前端React  +  antd-mobile UI组件库 + Redux 状态管理库 + Rea ...

  4. 设置 DNS，防止 DNS 污染，清除 DNS 缓存ipconfig /flushdns

    设置 DNS,防止 DNS 污染选中“使用下面的 DNS 服务器地址”,“首选 DNS 服务器”中填写 8.8.8.8,“备用 DNS 服务器”中填写 8.8.4.4,然后点击“确定”按钮清除 DNS ...

  5. 前端框架VUE----babel

    这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个 ...

  6. The logback manual #03# Configuration

    索引 Configuration in logback Automatically configuring logback Automatic configuration with logback-t ...

  7. kivy 滑动

    from kivy.uix.gridlayout import GridLayout from kivy.app import App from kivy.lang.builder import Bu ...

  8. Sort aborted Error in MySQL Error Log

    现象 [ERROR] lines containing "Sort aborted" are present in the MySQL error log file. [Warni ...

  9. Centos7.3+uwsgi+Nginx部署Django程序

    1. 安装Python,这里我用的是阿里云的centos7.3,自带python2,所以,此步略过,具体安装Python可Google. 2. 安装uwsgi,如果安装失败的话首先,我的Python解 ...

  10. P3380 【模板】二逼平衡树（树套树）（线段树套平衡树）

    P3380 [模板]二逼平衡树(树套树) 前置芝士 P3369 [模板]普通平衡树 线段树套平衡树 这里写的是线段树+splay(不吸氧竟然卡过了) 对线段树的每个节点都维护一颗平衡树 每次把给定区间 ...