<!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. ssh 修改端口号 --centos 7

    1 vim /etc/ssh/sshd_config Port   XXXXX #XXXXX 为要修改的端口号,默认是22,直接在新的行添加Port   XXXXX即可. 2 systemctl re ...

  2. 20200925--矩阵乘法(奥赛一本通P94 多维数组)

    计算两个矩阵的乘法.n*m阶的矩阵A乘以m*k阶的矩阵B得到的矩阵C是n*k阶的,且C[i][j]=A[i][0]*B[0][j]+A[i][1]*B[1][j]+...+A[i][m-1]*B[m- ...

  3. .net core 接收并存储客户端上传的文件

    1 文件是上传到Host,非上传到阿里云OSS 2 在Program.cs或StartUp中使用静态文件的中间件 public void Configure(IApplicationBuilder a ...

  4. uniapp中使用echarts点击图例与tooltips无反应

    只需要在项目main.js文件中加上 window.wx = {} // echarts中tooltips点击无反应与点击图例无反应解决方法 即可

  5. 如何卸载inventor 2023？怎么把inventor彻底卸载删除干净重新安装的方法【转载】

    inventor 2023卸载重新安装方法,使用清理卸载工具箱完全彻底删除干净inventor 2023各种残留注册表和文件.inventor 2023显示已安装或者报错出现提示安装未完成某些产品无法 ...

  6. 在uniapp中使用百度地图的Autocomplete（关键字自动完成提示）不弹出提示框的问题

    let ac = new BMap.Autocomplete({ "input": document.querySelector('input'), "location& ...

  7. C语言初级阶段4——数组3——字符数组

    C语言初级阶段4--数组3--字符数组 字符数组的定义:储存字符类型数据的集合 1.注意:如果用字符串给字符数组初始化,那么不需要{},但是要有"". 2.%s :用来输出字符串的 ...

  8. excel制作表格

    我们这个表格举例: 1. 序号列自动生成序号.选中数字"1"所在的单元格,将鼠标停留在图片中标红的区域向下拖动即可                                 ...

  9. Hex格式和Mot格式简介

    Hex格式和Mot格式简介 一.Hex格式介绍    1.1 什么是 Intel HEX 文件格式?  Intel HEX文件 是由一行行符合 Intel HEX文件格式的文本所构成的ASCII文本文 ...

  10. linux shell 目录

    linux shell 目录 目录 linux shell 目录 类型 unix支持三大主流shell linux支持的shell(可有四种) 部分相关命令 查询进程 ps pstree kill 查 ...