<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        ul{float: left;width: 200px}
        ul li{background: #ccc;padding: 30px 10px}
        .myitems{float: left;width: 500px;height: 300px}
        .myitems div{width: 100%;height: 100%;display: none}
        .item1{background: #f03}
        .item2{background: #6fc}
    </style>
</head>
<body>
<ul >
    <li>12</li>
    <li>123</li>
</ul>
<div class="myitems">
    <div class="item1 item"></div>
    <div class="item2 item"></div>
</div>
<script>
    $(function(){
        $("li").mouseenter(function(){
            $(".item").hide().eq($(this).index()).show();
        }).mouseleave(function(){
            console.log("aaa");
            $(".item").eq($(this).index()).hide();
        })
        $(".item").mouseenter(function(){
            $(this).show()
        }).mouseleave(function(){
            $(this).hide()
        })
    })
</script>
</body>
</html>

jQuery实现二级菜单的更多相关文章

  1. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  2. JQuery 纵向二级菜单与对齐方式

    1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...

  3. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

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

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

  5. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

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

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

  7. 二级菜单jquery

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

  8. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

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

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

随机推荐

  1. linux grep命令

    linux grep命令1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressio ...

  2. PHP 策略模式

    策略模式:定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化.策略模式把对象本身和运算规则区分开来,其功能非常强大,因为这个设计模式本身的核心思想 ...

  3. Windows10应用Docker部署DoNet Core

    Win10和Mac稳定版的Docker发布了,之前看了下徐磊老师的几篇Docker4Dotnet的文章http://devopshub.cn/2016/07/08/docker4dotnet-1-ov ...

  4. Struts2入门(二)——配置拦截器

    一.前言 之前便了解过,Struts 2的核心控制器是一个Filter过滤器,负责拦截所有的用户请求,当用户请求发送过来时,会去检测struts.xml是否存在这个action,如果存在,服务器便会自 ...

  5. [Android]Android端ORM框架——RapidORM(v2.0)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5626716.html [Android]Android端ORM ...

  6. FlashBuilder4安装SVN插件步骤

    1. 选择菜单 帮助–> 安装新软件 2. 在使用里键入地址:  http://subclipse.tigris.org/update_1.6.x并点击添加 在Subclipse栏里选择带有Re ...

  7. OC字符串基本操作

    不可变的字符串的修改方法有返回值(重新指向新的字符串地址) 可变的字符串的修改方法没有返回值(修改字符串本身) // NSString 不可变字符串 // 1.创建字符串对象 // 使用初始化方法创建 ...

  8. 获取iPhone手机的UDID和设备名称.

    关于设备名称: iPhone的设备名称也可以在手机上面查看到:设置-通用-关于本机-名称(设备名称是可以自己改的) 关于UUID: 什么?用了iPhone这么久你不知道什么叫UDID! UDID 是由 ...

  9. Laravel大型项目系列教程（一）

    Laravel大型项目系列教程(一) 一.课程概述 1.课程介绍 本教程将使用Laravel完成一个多用户的博客系统,大概会包含如下内容: 路由管理. 用户管理,如用户注册.修改信息.锁定用户等. 文 ...

  10. Appfuse：第一张表维护

    1. 建立表userinfo 列名 描述 UserID 主键.自增 UserName 用户名 Pwd 密码 CreateDate 创建日期 2. 在src/main/resources目录下增加文件h ...