HTML中，点击列表元素，在其下展开更多的小选项。不点的时候是收起来的。
就是实现路由器左边的菜单那样的功能。怎么实现，知道的指点一下，谢谢了！！

最常见的方法是通过Javascript控制某标签的CSS属性来实现的，下面是具体实现方法：

首先给要隐藏或显示的部分所在标签一个惟一的ID，比如将它们放到一个<div id="div1"></div>里;

然后给某个实体(按你的意思来，就是"列表元素")的onclick事件写一个响应的方法，方法中用上类似以下的语句：

document.all["div1"].style.display="block"; //显示
或
document.all["div1"].style.display="none"; //隐藏

其中"div1"就是要显示或隐藏的部分的ID。

Html 列表实现展开和收起的更多相关文章

  1. Vue:列表展开和收起（超过一定行数时显示‘查看更多’按钮）

    前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...

  2. el-upload上传列表实现 展开 收起

    # el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...

  3. 【Android】键盘的展开和收起

    键盘的展开和收起主要使用到类InputMethodManager:http://developer.android.com/reference/android/view/inputmethod/Inp ...

  4. js 点击展开、收起

    //点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...

  5. UITableView多层展开与收起

    规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...

  6. 长图的展开与收起（Android）

    前言: 在app的文章中,经常会夹杂着一些特别长的长图.在阅读的时候需要滑动很久才能看图片下方的文字,因此对于长图只展示图片上面一部分,并且可以展开这个功能是很重要的. 效果: 基本思路: 利用sca ...

  7. jQuery实现画面的展开、收起和停止

    主要用到动画效果中的三个操作 ("#id").slideDown(3000): // 后面的数字表示效果的时长 ("#id").stop(); ("# ...

  8. div展开与收起（鼠标点击）

    效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. Silverlight自定义控件系列 – TreeView (3) 添加展开和收起事件

    由于Writer嫌我文章过长,只能把上篇拆开两半了.以下是接着上篇的. 准备工作做完了,现在就要完成点击事件. 定义Expander和单击事件: 1: /// <summary> 2: / ...

随机推荐

  1. 从代码层读懂 Java HashMap 的实现原理

    概述 Hashmap继承于AbstractMap,实现了Map.Cloneable.Java.io.Serializable接口.它的key.value都可以为null,映射不是有序的.Hashmap ...

  2. JavaScript中Undefined 和 Null的区别

    Undefined 这个值表示变量不含有值. 可以通过将变量的值设置为 null 来清空变量. 例如: <script> var person; var car="Volvo&q ...

  3. Redis - 事务操作

    Redis的事务基于四个命令: MULTI EXEC DISCARD WATCH 创建事务 Redis的事务从一个MULTI命令开始,MULTI总会命令返回"ok". 接着就可以开 ...

  4. 从代理模式到Spring AOP

    什么是代理模式 假如我喜欢上隔壁班的翠花,但是我没胆量向她送花,这时候我需要一个铁杆哥们帮我做这件事, 很明显这哥们是个代理,是去执行任务的,但是花实际上是我"送"的,代理和我一样 ...

  5. Struts2 知识点梳理

    一.Struts2简介 1.概念:轻量级的MVC框架,主要解决了请求分发的问题,重心在控制层和表现层.低侵入性,与业务代码的耦合度很低.Struts2实现了MVC,并提供了一系列API,采用模式化方式 ...

  6. SSM实现批量删除功能

    批量删除功能的实现 其实实现这个功能还是挺简单的 因为我这是直接拼接的,所以用了DOM方法来获取id话不多说直接上代码首先是复选框全选和反选这里的话 获取最上面一个复选框的状态同步到拼接的复选框  $ ...

  7. 关于responseHeader的一些基础设置

    1.关于响应头的一些基础设置 //设置相应头 response.addHeader("name","zhangsan"); response.addIntHea ...

  8. css3之背景属性之background-size

    一.相关属性: background-image: url(“./img/a.jpg”); //设置元素背景图片 background-repeat: repeat/no-repeat: //设置背景 ...

  9. HDD 机械硬盘 安装 linux(centos7)

    1. 下载 UltraISO 文件-->打开, 选中centos.iso镜像;   启动-->写入硬盘映像-->硬盘驱动器(选中u盘)写入方式(USB-HDD+v2)-->写入 ...

  10. world特殊控制符输入

    特殊符号的输入表示法. 1,“^l”表示软回车(象这种“↓”). 2,“^p”表示硬回车. 3,“^t”表示制表符. 4,“^m”表示手动分页符. 5,“^+”表示长划线(—). 6,“^=”表示短划 ...