-第3章 jQuery方法实现下拉菜单显示和隐藏-程序员宅基地

技术标签: ViewUI  javascript  

知识点

  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>

转载于:https://www.cnblogs.com/daysme/p/6475348.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dgce32897/article/details/102039428

智能推荐

Qt中表格属性相关操作,调整表格宽度高度自适应内容等_qt设置表格列宽-程序员宅基地

文章浏览阅读1.9k次。qt中表格相关方法与属性的设置,掌握表格的基本使用。_qt设置表格列宽

Unity Shader着色器优化-程序员宅基地

文章浏览阅读215次。Unity Shader着色器优化 https://mp.weixin.qq.com/s/rtVJDt0m4aGbigWadEZgXA 对游戏开发者而言,着色器长久以来就是游戏开发中的重要部分,在Unity中编写并实现着色器的过程直观且高效,优秀的着色器还可以创造非常精美的游戏画面,同时保证极高的性能。今天将由Unity的技术工程师张陈渊来分享..._unity editor shader闪蓝

Linux cgroup机制分析之框架分析_cgroup_set_value-程序员宅基地

文章浏览阅读1.5k次。http://blog.chinaunix.net/space.php?uid=20543183&do=blog&id=1930840一: 前言前段时间,一直在写操作系统和研究Solaris kernel.从而对linux kernel关心甚少.不久前偶然收到富士通的面试,由于诸多原因推辞掉了这次机会.不过招聘要求给我留下了较深的印像.其中涉及到了cgroup机制.cgroup对我来说_cgroup_set_value

前后端分离项目中前端如何调用后端接口?_前后端分离前端怎么调用后端接口-程序员宅基地

文章浏览阅读1.4w次,点赞5次,收藏49次。前端主页:http://localhost:8088/dist/view/index.html后端地址:http://localhost:8089/mall_war/*.do前后端启动项目,无法访问接口。这个问题是跨域引起的这里我只推荐这两种方式跨域,其它的跨域方式都还有很多但都不推荐,真心主流的也就这两种方式。 开发环境 生产环境 方案一 cors cors 方案二 proxy nginx 方案一:cors全称为 Cross ..._前后端分离前端怎么调用后端接口

python怎么保留整数输出_python怎么保留整数-程序员宅基地

文章浏览阅读1.1w次。Python 几种取整的方法数据处理是编程中不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理。取整的方式则包括向下取整、四舍五入、向上取整等等。1、向下取整(推荐学习:Python视频教程)向下取整直接用内建的 int() 函数即可:>>> a = 3.75>>> int(a)2、四舍五入对数字进行四舍五入用 round() 函..._python鸡兔同笼问题语句输出时如何保留整数

MyBatis 动态Sql 模糊查询_mysql如何在mybatis中使用动态sql实现模糊查询获取前端数据-程序员宅基地

文章浏览阅读202次。Date 他有很多作用 比如说包括Get和Set方法 toString()方法 还有构造函数等。_mysql如何在mybatis中使用动态sql实现模糊查询获取前端数据

随便推点

计算机毕设基于springboot+MySQL的公选课在线选课系统vue-程序员宅基地

文章浏览阅读9次。spring boot+MySQL公选课在线选课系统》该项目含有源码、文档等资料、配套开发软件、软件安装教程、项目发布教程等。开发工具:IDEA(2020版)/MyEclipse(10)/Eclipse、Visual Studio Code。系统功能完整,适合作为毕业设计、课程设计、数据库大作业 参考 以及学习商用皆可。操作系统:Windows 10、Windows 7、Windows 8。前端技术:JavaScript、VUE.js(2.X)、css3。数据库:MySQL 5.7.26(版本号)

NumPy入门讲座(1):基本概念_numpy数据相关概念-程序员宅基地

文章浏览阅读1.2w次,点赞20次,收藏37次。NumPy 是 Python 科学计算的基础软件包,提供多了维数组对象,多种派生对象(掩码数组、矩阵等)以及用于快速操作数组的函数及 API,它包括数学、逻辑、数组形状变换、排序、选择、I/O 、离散傅立叶变换、基本线性代数、基本统计运算、随机模拟等等。_numpy数据相关概念

VS创建C/C++项目_vs怎么创建c++项目-程序员宅基地

文章浏览阅读449次。示例工具 VS20171.打开VS 新建项目文件-新建-项目 或者点击如下新建项目也可以2.选择新建项目类型如果是VS13 选择win32控制台应用程序 如果是VS17选择桌面向导其中项目名和解决方案名字都可以修改项目名 单个项目(一个项..._vs怎么创建c++项目

腾讯云Ubuntu 20.04开启root用户远程登录并解决SSH服务器拒绝了密码的问题_ubuntu20.04开启root远程登录-程序员宅基地

文章浏览阅读7.2k次,点赞9次,收藏28次。文章目录1. 设置root密码2. 设置允许密码通过SSH登录2. 设置允许root用户使用密码通过SSH登录默认情况下:root用户默认是没有密码的,且不许登录。实际测试镜像:Ubuntu Server 20.04 LTS 64bit1. 设置root密码如果root未设置过密码,先以普通账号登录,然后输入以下命令来修改root密码:sudo passwd root输入 root 的密码,按 Enter,再重复输入 root 的密码,按 Enter返回passwd: password u_ubuntu20.04开启root远程登录

Centos7安装GBase8a V9.5_gbase data node端口还是集群服务端口-程序员宅基地

文章浏览阅读619次。连接集群时,如果当前IP(比如jdbc的最前面的IP)无法连接,则自动从 hostlist 里面挨个尝试连接,直到连接成功返回,或者均不可用报错退出。注意:dbaPwd配置指定gbase OS用户密码,rootPwd指定root OS用户密码,这里指定的是安装时需要用到的OS用户的密码,而不是数据库用户密码,数据库用户密码时安装完成以后会自动生成默认密码,然后再自行修改。注意:在同一应用程序中(JVM), 如果有多个不同用途的URL,则gclusterId必须唯一,否则会导致访问了不属于本服务负责的集群。_gbase data node端口还是集群服务端口

Python:Python基础-6.判断(if)语句_python if length==6:-程序员宅基地

文章浏览阅读163次。六、判断(if)语句目标开发中的应用场景if 语句体验if 语句进阶综合应用01. 开发中的应用场景生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?……[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wjOOJAyo-1577695503123)(media/001_未成年人禁止入内.jpg)][外链图片转存失败,..._python if length==6: