<!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. Java - 网络编程

    Java的网络编程学习,关于计算机基础的学习参考:计算机网络基础学习 - sqh.     参考:  

  2. js与java正则表达式处理字符串问题

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码.合理使用正则表达式确实会为程序员省去很多字 ...

  3. android环境下的即时通讯

    首先了解一下即时通信的概念.通过消息通道 传输消息对象,一个账号发往另外一账号,只要账号在线,可以即时获取到消息,这就是最简单的即使通讯.消息通道可由TCP/IP UDP实现.通俗讲就是把一个人要发送 ...

  4. iOS报错[__NSCFNumber length]: unrecognized

    出现这种报错很大的原因是因为类型给错了,或许你这个数据是从json上解析后得到的,但是需要看一下这个数据是NSString还是NSNumber类型,如果是NSNumber类型的话,你又直接使用NSSt ...

  5. Git本地服务器搭建及使用详解

    Git本地服务器搭建及使用 Git是一款免费.开源的分布式版本控制系统.众所周知的Github便是基于Git的开源代码库以及版本控制系统,由于其远程托管服务仅对开源免费,所以搭建本地Git服务器也是个 ...

  6. linux基本知识0

    linux的基本原则: 1.有目的单一的小程序组成,组合小程序完成复杂任务. 2.一切皆文件 3.尽量避免捕获用户接口 4.配置文件保存为纯文本格式 CLI接口: 命令提示符,prompt,bash ...

  7. centos7的网络设置

    必备知识:linux下对文件的编辑操作 首先给出的是vi的基础  后面会有详细的远程连接Centos的方法 vi的基本概念 基本上vi可分为三种操作状态,分别是命令模式(Command mode).插 ...

  8. Freeswitch 添加可转码的G729编码

    默认情况下Freeswitch自带的G729模块是pass-through-并不支持转码. 不过我们依然有个好奇的心, 所以我们决定添加一个支持G729转码的模块到Freeswitch. 1. 下载m ...

  9. 项目游戏开发日记 No.0x000004

    14软二杨近星(2014551622) 还有两周就要交项目了, 我们的作品, 作为作业, 好吧, 其实它完成了接近50%, (only the first bate), 其实也是各种各种忙, 然后才赶 ...

  10. Vmware虚拟机Devstack安装openstack（All in one）

    Vmware虚拟机Devstack安装openstack(All in one) 博客园第一篇博客,先练习一下. 官方文档 环境 Vmware虚拟机 OS : Ubuntu 14.04 Nat网络,D ...