<!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. Linux程序设计（一）入门

    1. linux程序 Linux应用程序表现为两种特殊类型的文件:可执行文件和脚本文件. 可执行文件:是计算可以直接运行的程序,相当于windows的.exe文件. 脚本文件:一组指令的集合.这些指令 ...

  2. General: Know How to Use InetAddress

    Modern applications often need the ability to learn information about hosts out on the network. One ...

  3. 谈JAVA的内存回收(一)

    谈JAVA的内存回收 程序员需要通过关键字new创建Java对象,即可视为Java对象申请内存空间,JVM会在堆内存中为每个对象分配空间,当一个Java对象失去引用时,JVM的垃圾回收机制会自动清除他 ...

  4. CSS学习之盒子模式

    从CSS角度来看,页面上每个元素都是一个盒子,不管是块元素还是内敛元素等.而这个盒子由四个部分组成.内容区,补白,边框,边界,下面来介绍下这四种元素. 1 内容 每个元素都是以某些内容开始的,比如文本 ...

  5. jquerymobile知识点：动态ListView

    这里要讲的是jqueryMobile 中的ListView 动态的列表 <ul data-role="listview" data-inset="true" ...

  6. 在 VS14 上安装 Visual F# Power Tools

    在 VS14 上安装 Visual F# Power Tools Visual F# Power Tools 眼下版本号 1.3,下载地址:http://visualstudiogallery.msd ...

  7. Spring框架：Spring容器具体解释

    Spring容器 Spring容器能够帮助你管理所有的Bean对象.专业术语称之为IoC控制反转.在传统的程序中.对象的生成都是由开发人员完毕的.而在控制反转中,对象的生成所有都交给框架完毕.这种优点 ...

  8. Redis集群服务器-高可用调研随笔[转]

    今天改了一天的Bug,本想下午开始专研Redis命令集,结果也泡汤了.只能在下班的路上考虑下Redis集群服务器的高可用方案.随笔而已,尚未成型,仅作记录. 当然,我说的可能比较片面,欢迎拍砖.斧正. ...

  9. LabVIEW系列——自定义错误

    1.自定义错误代码文本文件在labview中三处:      a).E:\Program Files\National Instruments\LabVIEW 8.6\project\errors   ...

  10. git 远程追踪

    $ git branch --set-upstream-to origin/master http://stackoverflow.com/questions/21729560/how-to-make ...