可折叠展开的简单目录实现代码

可折叠展开的简单目录
div{font-size:12px;color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1}

+ 主目录1

- 子目录1

- 子目录2

- 子目录3

- 子目录4

+ 主目录2

- 子目录1

- 子目录2

- 子目录3

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 基于jQuery实现下拉收缩(展开与折叠)特效

    jQuery下拉收缩特效 $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); body { margin: 0 auto; padding: 0; width: 570px; fon

  • jquery实现点击TreeView文本父节点展开/折叠子节点

    jquery实现点击TreeView文本父节点展开/折叠子节点

    以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧. 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的. 首先思路是,,让文本点击的时候执行左边'+'号的事件,查看源码看到,'+'号的事件是: javascript:Tr

  • css实现会折叠、展开的菜单导航栏效果

    function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.backg

  • 可折叠展开的简单目录实现代码

    可折叠展开的简单目录 div{font-size:12px;color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1} + 主目录1 - 子目录1 - 子目录2 - 子目录3 - 子目录4 + 主目录2 - 子目录1 - 子目录2 - 子目录3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现超简单的展开、折叠目录代码

    js实现超简单的展开、折叠目录代码

    本文实例讲述了js实现超简单的展开.折叠目录代码.分享给大家供大家参考.具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下: <title>可折叠展开的简单目录</title> <style> div{

  • Angular directive递归实现目录树结构代码实例

    Angular directive递归实现目录树结构代码实例

    整理文档,搜刮出一个Angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享. 效果图: 重点: 1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用 <script type="text/ng-template" id="treeView.html"> <ul> <li ng-repeat="item in treeData.children" ng

  • js实现可折叠展开的手风琴菜单效果

    js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • PHP 创建文件(文件夹)以及目录操作代码

    一.目录操作 首先是从目录读取的函数,opendir(),readdir(),closedir(),使用的时候是先打开文件句柄,而后迭代列出: 复制代码 代码如下: <?php $base_dir="filelist/"; $fso=opendir($base_dir); echo $base_dir."<hr/>"; while($flist=readdir($fso)){ echo $flist."<br/>";

  • BootStrap实现树形目录组件代码详解

    BootStrap实现树形目录组件代码详解

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用. 车型一共有4级目录.要使用目录树. 然后分活动和商品两种,需要能够通过不通参数来调用该组件. 车型品牌要使用字母导航. 技术实现 数据都是后端传json过来,我们ajax获取然后操作. 由于车型总数据有几万条以上,不可能一次性请求过来.这里我们使用异步的方式,每点击一次目录节点,加载它的下一级. 这里我们用两个参数来控制活动和商品的不同加载._showPrice和opened 后端传过来的第一级数据

  • Hibernate初体验及简单错误排除代码详解

    Hibernate初体验及简单错误排除代码详解

    Hibernate是什么,有多少好处,想必查找这类博文的都知道,所以就不多说了.下面是我对Hibernate简单使用的一个小小的总结.与君(主要是刚入门的)共勉吧! 创建的顺序 创建Hibernate的配置文件 创建持久化的类 创建对象-关系的映射文件 通过HibernateAPI编写访问数据库的代码 关于详细的步骤 导入Hibernate必须的jar包(hibernate-release-版本号.Final\lib\required) 然后是导入MySQL的jdbc的驱动(mysql-conn

  • 分享3个简单的Python代码高效运行技巧

    分享3个简单的Python代码高效运行技巧

    目录 1. 引言 2. 获取字典的值 3. 循环中使用enumerate 4. 使用f-strings来拼接和打印字符串 5. 总结 1. 引言 小伙伴们日常工作中都必不可少地使用Python实现一些简单的功能,但是不同的人所编写的代码执行效率往往是不同的.本文重点介绍大家经常遇到的场景下,三个有效的,方便理解的,执行高效的实用技巧. 闲话少说,我们直接开始吧!!! 2. 获取字典的值 不妨假设我们有以下字典: my_dict = {'first_name': 'Michaela',      

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • 用js编写的简单的计算器代码程序

    用js编写的简单的计算器代码程序

    最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

随机推荐