<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        ul ul{display: none}

        .nav{

            width: 180px;

            height: 180px;

            background-color: red;

        }

    </style>

</head>

<body>

    <ul class="nav">

        <li>

            <span>一级菜单</span>

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

        <li>

            <span>一级菜单</span>

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

        <li>

            <span>一级菜单</span>

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

        <li>

            <span>一级菜单</span>

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

    </ul>

</body>

<script src="jquery.js"></script>

<script>

    $(".nav").children("li").mouseover(function(){

        $(this).children("ul").stop().show(500)

        .parent().siblings().children("ul").stop().hide(500);

    })

    // 动画开启之前，先停止

    // 计时器开启之前，先清除

    // .parent()父元素选择器

    // .siblings()除了当前的所有同级（兄弟）

</script>

</html>

jquery二级菜单。显示了jquery的方便的更多相关文章

  1. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  2. css实现二级菜单显示和收缩

    <ul class="nav"> <li><a href="#">一级菜单</a> <ul class=& ...

  3. js实现二级菜单显示和收缩

    window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; ...

  4. 导航栏项目滑过时子菜单显示/隐藏jquery代码

    ;(function(window){    $('.menuitem').hover(function(){        $('>a',this).css('background-color ...

  5. PHPCMS v9 导航显示二级菜单,显示相邻栏目，内容页显示二级栏目

    导航显示二级栏目 <div class="menu">{pc:content action="category" catid="0&quo ...

  6. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  7. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  8. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  9. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

随机推荐

  1. 浙大版《C语言程序设计（第3版）》题目集 练习3-3 统计学生平均成绩与及格人数 （15 分）

    练习3-3 统计学生平均成绩与及格人数 (15 分) 本题要求编写程序,计算学生们的平均成绩,并统计及格(成绩不低于60分)的人数.题目保证输入与输出均在整型范围内. 输入格式: 输入在第一行中给出非 ...

  2. Guava布隆过滤器实战应用

    布隆过滤器 简介:本质上布隆过滤器是一种数据结构,比较巧妙的概率型数据结构(probabilistic data structure),特点是高效地插入和查询,可以用来告诉你 "某样东西一定 ...

  3. node邮件发送html，简单2步附代码

    node 发送 html 邮件 安装 npm install nodemailer 新建 html 文件 ① 新建 views 目录下面新增 index.html(当然也可以使用其它目录结构,下面的代 ...

  4. Alibaba Cloud Linux 3.2104 64位安装php7.2.12

    1 安装php所需要的扩展 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel curl curl ...

  5. 对volatile修饰的变量使用memset函数

    背景 今天面试了一家公司,面试官问了我一个开放性的问题.大致意思是,为什么对volatile修饰的变量调用memset函数,编译的时候会报错.当然,我是不知道为什么啦.之前没有遇到过嘛.不过我还是做了 ...

  6. centos 发送邮件

    安装mailx yum install -y mailx 配置邮件服务器信息 vi /etc/mail.rc set from=xxxx@yyy.com set smtp=smtp.yyy.com s ...

  7. STL练习-ACboy needs your help again!

      ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark ...

  8. SQL语句底层执行顺序

    1. SELECT 语句的完整结构 SQL92语法: SELECT ...,....,(存在聚合函数) FROM ...,...,... WHERE 多表的连接条件 AND 不包含聚合函数的过滤条件 ...

  9. 解决Tomcat 启动，http://localhost:8080无法访问 问题

    注意:1:tomact能正常启动 2 : 通过startup启动后可以正常访问8080界面: 3: 通过eclipse启动后无法正常访问8080界面: Tomcat能在eclipse里面能正常启动,但 ...

  10. Learning under Concept Drift: A Review 概念漂移综述论文阅读

    首先这是2018年一篇关于概念漂移综述的论文[1]. 最新的研究内容包括 (1)在非结构化和噪声数据集中怎么准确的检测概念漂移.how to accurately detect concept dri ...