知识点

  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. python 什么是位置参数？

    位置参数是必选参数 ----不能不传, ----不能传一部分, ---必须按顺序传 ----必须传全部参数

  2. Struts2输入校验（XML方式）

    本章主要介绍struts2的XML配置方式输入校验.以下将结合一个实例程序进行说明. 代码结构: 关键代码: RegistAction.javapackage com.alfred.regist.ac ...

  3. L1正则和L2正则的比较分析详解

    原文链接:https://blog.csdn.net/w5688414/article/details/78046960 范数(norm) 数学上,范数是一个向量空间或矩阵上所有向量的长度和大小的求和 ...

  4. 【函数封装】javascript判断是否是微信浏览器

    //判断是否是微信浏览器的函数 function isWeiXin(){ //window.navigator.userAgent属性包含了浏览器类型.版本.操作系统类型.浏览器引擎类型等信息,这个属 ...

  5. Vue2.0，Express实现的简单跨域

    https://www.cnblogs.com/kevin-zjy-blog/p/7357220.html 1. 通过jsonp跨域2. document.domain + iframe跨域3. lo ...

  6. Qt浅谈之一：内存泄露（总结）

    一.简介       Qt内存管理机制:Qt 在内部能够维护对象的层次结构.对于可视元素,这种层次结构就是子组件与父组件的关系:对于非可视元素,则是一个对象与另一个对象的从属关系.在 Qt 中,在 Q ...

  7. Java 代码性能调优“三十六”策

    代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是, ...

  8. pyenv安装

    petalinux-config出错 以为是pyenv的问题,后发现不是,把pyenv的安装卸载总结如下: 折腾了半天发觉是安装了pyenv导致的python版本混乱,卸载后问题解决了.(卸载过程见h ...

  9. Prometheus监控学习笔记之PromQL 内置函数

    概述 Prometheus 提供了其它大量的内置函数,可以对时序数据进行丰富的处理.某些函数有默认的参数,例如:year(v=vector(time()) instant-vector).其中参数 v ...

  10. Golang利用select和普通函数分别实现斐波那契数列

    //斐波那契数列 //1 1 2 3 5 8 //观察规律 //第一轮:前两个数是1,1,相加等于2 //第二轮:第二个数和第三个数是1,2,相加等于3 //第三轮:第三个数和第四个数是2,3,相加等 ...