<!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树形目录制作的更多相关文章

  1. JQuery树形目录插件Dynatree

    最近做网页需要做一个树形目录功能.找了一下发现有很多JQuery插件都可以实现这个功能.选了一个自己觉得最满意的插件Dynatree做个学习笔记. 可以把静态的html转成树形目录,还可以动态创建添加 ...

  2. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解

    无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...

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

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

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

    来源:CSDN 作者:mybelief321 无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.他说是一个插件叫NERDTree,安装执行后的效果 ...

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

    转自: http://blog.csdn.net/love__coder/article/details/6659103 1,安装NERDTree插件 先下载,官网:http://www.vim.or ...

  7. vim插件：显示树形目录插件NERDTree安装 和 使用

    下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...

  8. jQuery手风琴的制作！！

    jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...

  9. 40款非常棒的 jQuery 插件和制作教程（系列一）

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

随机推荐

  1. Oracle索引(B*tree与Bitmap)的学习总结

    在Oracle中,索引基本分为以下几种:B*Tree索引,反向索引,降序索引,位图索引,函数索引,interMedia全文索引等,其中最常用的是B*Tree索引和Bitmap索引.(1).与索引相关视 ...

  2. （一）Eclipse 快捷键

    Ctrl+Alt+Down,即可以在下面快速复制一行 Ctrl+Alt+Up,即可以在上面快速复制一行.   1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键 ...

  3. java 打包插件

    是时候闭环Java应用了 原创 2016-08-16 张开涛  你曾经因为部署/上线而痛苦吗?你曾经因为要去运维那改配置而烦恼吗?在我接触过的一些部署/上线方式中,曾碰到过以下一些问题: 1.程序代码 ...

  4. C —— 零碎笔记

    1.字节对齐和结构体大小 链接 2.共同体union 的作用 链接 3.文件夹和文件操作 windows: http://blog.csdn.net/gneveek/article/details/6 ...

  5. String的成员方法的使用

    <%@ page language="java" contentType="text/html; charset=gbk"%> <html&g ...

  6. 【Android - 框架】之Fresco的使用

    当下有很多图片加载框架,常见的有Glide.Fresco.Picasso等.Glide因为其体积小.缓存机制强大等优点,受到了广大程序员的青睐:Fresco虽然体积比较大,缓存机制也没有Glide强大 ...

  7. Qt之遍历文件夹（经典详解）

    关于Qt操作文件夹.文件的知识用途较多,比如遍历下一层乃至所有子孙文件.文件夹,获取它们的一些信息(大小.类型.最后更改时间等).当然,也可以进行级联删除.     首先看简单的: 一.Qt遍历文件夹 ...

  8. Android Studio 2.2 External Build

    今天在用studio写Native程序时发现2.2版本引入了一个 External Build来进行Native项目的构建. 最直观的表现就是c/c++的源码文件不用跟java文件在一个项目文件夹下了 ...

  9. 【bzoj2938】[Poi2000]病毒

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...

  10. Java异常之try，catch，finally，throw，throws

    Java异常之try,catch,finally,throw,throws 你能区分异常和错误吗? 我们每天上班,正常情况下可能30分钟就能到达.但是由于车多,人多,道路拥挤,致使我们要花费更多地时间 ...