JQuery树形目录制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<style type="text/css">
    .menu{width:300px;}
    .has_children{background:#555; color:#fff; cursor:pointer;}
    .highlight{color:#fff; background:green;}
    .div{padding:0px; margin:10px 0px;}
    div a{background:#888; display:none; float:left; width:300px;}

</style>
    <div class="menu">
        <div class="has_children">
            <span>第一章-认识 JQuery</span>
            <a>1.1-Javascript和Javascript库</a>
            <a>1.2-加入Jquery代码</a>
            <a>1.3-编写简单的JQUERY代码</a>
            <a>1.4-JQUERY对象和其他库的冲突</a>
            <a>1.5-JQUERY对象和DOM对象</a>
            <a>1.6-JQUERY开发工具和插件</a>
            <a>1.7-小结</a>
        </div>

        <div class="has_children">
            <span>第二章-认识 JQuery</span>
            <a>12.1-Javascript和Javascript库</a>
            <a>12.2-加入Jquery代码</a>
            <a>12.3-编写简单的JQUERY代码</a>
            <a>12.4-JQUERY对象和其他库的冲突</a>
            <a>12.5-JQUERY对象和DOM对象</a>
            <a>12.6-JQUERY开发工具和插件</a>
            <a>12.7-小结</a>
        </div>

        <div class="has_children">
            <span>第二章-认识 JQuery</span>
            <a>123.1-Javascript和Javascript库</a>
            <a>124.2-加入Jquery代码</a>
            <a>125.3-编写简单的JQUERY代码</a>
            <a>126.4-JQUERY对象和其他库的冲突</a>
            <a>127.5-JQUERY对象和DOM对象</a>
            <a>128.6-JQUERY开发工具和插件</a>
            <a>129.7-小结</a>
        </div>

    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            //原理说明:
            /*
                首先我们要找到这个菜单的标题,在他的身上加上一个单击事件,
                之后的$(this)就代表着这个has_children对象,给他加上一个选中的状态,并将这个菜单下的所有的a标签显示出来;
                写到这一步,我们的菜单就基本上写完了,但是现在有个问题就是我们单击后菜单就不会回去了,下面们我们在使用
                siblings()这个函数也就是遍历同胞元素,去除掉所有同胞元素的样式,并且他们的菜单内容全部的隐藏掉!
            */
            $(".has_children").click(function(){
                $(this).addClass("highlight").children("a").show().end();
                $(this).siblings().removeClass("highlight").children("a").hide();
            });
        });
    </script>
</body>
</html>

JQuery树形目录制作,布布扣,bubuko.com

时间: 2024-10-23 17:47:25

JQuery树形目录制作的相关文章

jquery树形菜单

转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!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"&g

Vim升华之树形目录插件NERDTree安装图解

Vim升华之树形目录插件NERDTree安装图解 无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ubuntu12.04,版本不同可能 .vim 所在的目录不同.本节用到的压缩包已经上传到网站,如有需要,请自行下载. 免费下载地址在 http://linux.linuxidc.com/ 用户名与密码都是www.linuxidc.com 具体下载目录在

共有21款 jQuery 树形控件开源软件,第1页

JQuery Tree 插件 zTree zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree...更多zTree信息 最近更新: [每日一博]Ztree+PHP 无限极节点递归查找节点 发布于 1年前 jQuery的Tree控件 jstree j

vim 树形目录插件NERDTree安装及简单用法

转自: http://blog.csdn.net/love__coder/article/details/6659103 1.安装NERDTree插件 先下载,官网:http://www.vim.org/scripts/script.php?script_id=1658 解压缩之后,把 plugin/NERD_tree.vim 和doc/NERD_tree.txt分别拷贝到~/.vim/plugin 和 ~/.vim/doc 目录. 2.使用 1.在linux命令行界面,输入vim 2.输入  

vim树形目录

NERD tree树形目录插件 • 插件简介 NERD tree是一款vim树形文件资源管理器插件.NERD tree可以让你在vim中浏览你的文件系统,打开想要的文件或目录. • 插件安装 ? 下载NERD tree,下载地址:http://www.vim.org/scripts/script.php?script_id=1658: ?  存放路径,在Windows系统下路径为:vim安装路径\vimXX\,在Linux系统下安装路径为:/usr/share/vim/vimXX/: ?  将下

简单的树形目录展示

<!DOCTYPE html><head> <meta charset="utf-8"/><title>树形菜单</title><style type="text/css" media="all">a,a:visited { color:#333; text-decoration:none; }a:hover { color:#f60; }body,td { font:13p

vim插件:显示树形目录插件NERDTree安装 和 使用

下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 我的实验环境是centos6.6,其他版本可能有些不同. 安装方法很简单,先把压缩文件下载下来,解压后将plugin目录下的NERD_tree.vim拷贝~/.vim/plugin以及doc目录下的NERD_tree.txt拷贝到~/.vim/doc. ~表示当前用户的目录,我的环境中没有~/.v

使用 jQuery 和 CSS3 制作滑动导航菜单

这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文

一张表保存一个无限级树形目录

一张表保存一个无限级树形目录: /****** Object: Table [dbo].[TreeMenue] Script Date: 08/20/2014 18:03:00 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[TreeMenue]( [ID] [int] IDENTITY(1,1) NOT NULL, [MenueName] [v