<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my_news</title>
<style>
*{padding:0;list-style:none;margin:0;}
body{background:#666;}
.linBox{margin-top:10px;margin-left:10px;width:70px;}
.linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; width:100px;}
.linBox ul li .linBoxList{background:#ccc; height:330px;width:300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".linBox ul li").hover(function(){
        $(this).find(".linBoxList").show();
    },
    function(){
        $(this).find(".linBoxList").hide();
    });
});
</script>
</head>
<body>
<div class="linBox">
    <ul>
        <li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
            </div>
        </li>

<li>
            <a href="">yyyyyyyyyyy</a>
            <div class="linBoxList">
            <a href="">yyyyyyyyyy</a>
            </div>
        </li>

<li>
            <a href="">zzzzzzzzzz</a>
            <div class="linBoxList">
            <a href="">zzzzzzzzz</a>
            </div>
        </li>

<li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>

<li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

jquery 左侧展开栏目的更多相关文章

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

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

  2. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  4. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  6. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

  7. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  8. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  9. jQuery 当前展开其他收缩 三级下拉菜单（转载）

    jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. Ruby on Rails Session 2: How to install Aptana Studio 3 on Ubuntu 12.04 LTS

    Update: An updated version of these instructions for Ubuntu 12.10 (Quantal Quetzal) is available her ...

  2. .net core 使用DES加密字符串

    找了很久,都是用的第三方的插件处理,但是第三方的插件不兼容.net core中内置包. 接下来分享自己的方法: 1.创建一个加密方法类:SecurityHelper. public class Sec ...

  3. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  4. [AngularJS] Extract predicate methods into filters for ng-if and ng-show

    Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...

  5. 设计模式 - 观察者模式(Observer Pattern) 详细说明

    观察者模式(Observer Pattern) 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26583157 版权全部 ...

  6. MySQLdb安装和使用2

    http://blog.chinaunix.net/uid-8487640-id-3183185.html MySQLdb是Python连接MySQL的模块,下面介绍一下源码方式安装MySQLdb: ...

  7. 聊聊 iOS 中的网络加密

    介绍下 公司的接口一般会两种协议的,一种HTTP,一种HTTPS的,HTTP 只要请求,服务器就会响应,如果我们不对请求和响应做出加密处理,所有信息都是会被检测劫持到的,是很不安全的,客户端加密可以使 ...

  8. Linux下搭建Oracle11g RAC(4)----配置oracle,grid用户SSH对等性

    虽然在安装软件的过程中,oracle会自动配置SSH对等性,建议在安装软件之前手工配置. 配置oracle用户对等性: node1: [root@node1 ~]# su - oracle node1 ...

  9. SDWebImage 源码阅读分享

    SDWebImage 源码阅读分享 疑问列表 SDWebImage 整体框架图,主要的类包含哪些 SDWebImage 如何进行缓存管理,过期失效策略,缓存更新 SDWebImage 如何多线程处理的 ...

  10. HttpModule HttpHandler HttpHandlerFactory 学习笔记

    1.HttpModule 最常见的是使用HttpModule来做页面权限控制. 在新建类库添加如下代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...