<!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. mysql之数据类型-第三篇

    mysql数据库中的每个列都应该有适当的数据类型,用于限制或允许该列中存储的数据.mysql的数据类型分别有整数,浮点数和定点数类型,日期和时间类型,字符串类型和二进制类型等. 整数类型 数值型数据类 ...

  2. 【flask】建站经验随笔

    [前端] 1.前端table标签中每行使用template中 {%for i in rows%} {% endfor %}来生成之后,如果想对每行进行一个button处理,此时如果使用jquery的$ ...

  3. Optional类与使用==判断null有什么区别？使用Optional类有什么优势？

    1.使用object==null的例子 2.null带来的问题 3.其他语言中null的处理(替代) 4.Java8的Optional类 4.1 这样做有什么好处呢? 4.2 引入Optional类的 ...

  4. PSO 算法的变体python实现

    上演化计算课的时候老师让我们实现EOPSO算法(一种精英反向的粒子群优化算法),下面是他的算法步骤: 首先我们需要知道一些基础知识: (1)基础PSO算法 (2)精英反向解 import numpy ...

  5. 【Delphi7官方镜像版】delphi_7_ent_en官方镜像 阿里云盘

    [Delphi7官方镜像版]「delphi_7_ent_en官方镜像.iso.exe」https://www.aliyundrive.com/s/Du9C4XfZfwG 点击链接保存,或者复制本段内容 ...

  6. https://计算机等级分类总结

    4个等级: 一级:定位为满足人们在一般性工作中对计算机的应用,重点是操作能力的考核: 二级:定位为计算机程序员,可谓"计算机蓝领". 三级:定位为"开发工程师" ...

  7. Java基础Day7-值传递和引用传递

    一.值传递 Java都是值传递. 值传递:是指在调用函数时,将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改,就不会影响到实际参数. 值传递是对基本数据类型而言. 二.引用传递 引用传递 ...

  8. Spring系列之基于注解的容器配置7

    目录 基于注解的容器配置 @Required(弃用) `@Autowired` `@Primary` @Qualifier 使用泛型作为自动装配限定符 `@Resource` `@Value` 使用` ...

  9. Navicat Premium 12 安装破解过程 （经过测试）

    @ 目录 下载安装 下载 解压文件目录 安装使用步骤截图 1. 安装navicat120_premium_cs_x64.exe 软件 2. 解压Navicat.Premium 破解补丁.rar 3. ...

  10. day01学习小记

    # Markdown学习 ## 标题 ### 三级标题 #### 四级标题 ## 字体 Hellow,World! Hellow,world hellow,world! hellow,world ## ...