<!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. Mysql FROM_UNIXTIME效率 VS PHP date()效率 数据说话！

    这几天在做数据统计,有几个统计图的需求是这样的: 按照年.月.日统计订单数量, 比方一年12个月,统计出1月多少订单,二月多少订单,按照这种模式统计. 但是数据库里存放的是 timestamp  的  ...

  2. spring mvc返回json字符串的方式

    spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json            优点:不需要自己再处理 步骤一:在spring- ...

  3. Hibernate4.2.4入门(二)——一对多的映射关系

    一.前言 前面我们已经学过hibernate的基础,学会增删改查简单的操作,然而我们数据库中存在着1对多,多对1,多对多的关系,hibernate又是基于ORM基础上的开源框架,可以让我们不用去编写S ...

  4. 移除HTML5 input在type="number"时的上下小箭头

    /*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...

  5. Android Weekly Notes Issue #226

    Android Weekly Issue #226 October 9th, 2016 Android Weekly Issue #226 本期内容包括: 用Firebase做A/B Test; 用R ...

  6. IOS 杂笔－11（实现在外部无法改变UIView的size）

    我想题目说的或许不是很清楚,那么现在我详细介绍一下这篇随笔内容. 在外部无法改变UIVIew控件的size. 这里说是UIView,但是事实上,是大多数控件而绝非仅UIView. 想要实现在外部无法改 ...

  7. 记录我的点点滴滴从此刻做起——iOS开发工程师

    作为一个iOS工程师,想写博客也是有原因的:首先有这个想法(写博客的想法)也是因为想到自己都从事iOS开发快两年了,怎么也只会堆代码,写view,技术真的很一般,感觉都要被淘汰了:基于以上原因,自己也 ...

  8. ios10.2真机调试包，ios升级10.2后需要添加

    下载地址: http://download.csdn.net/detail/koktear/9710820 添加地址: finder-应用程序-找到Xcode-右击显示包内容-Contents-Dev ...

  9. netty学习资料

    netty学习资料推荐官方文档和<netty权威指南>和<netty in action>这两本书.下面收集下网上分享的资料 netty官方参考文档 Netty 4.x Use ...

  10. O(1)效率的表面模糊算法优化。

    很久没有写文章了,主要是最近一段时间没有以前那么多空暇空间,内存和CPU占用率一致都很高,应前几日群里网友的要求,今天发个表面模糊的小程序来找回之前写博客的热情吧. 国内我认为,破解表面模糊的原理的最 ...