php 展开收缩,怎样用JS做出列表展开收缩扩展功能

阳光穿透心脏的1/2处 2022-10-22 02:53 170阅读 0赞

这次给大家带来的是怎样用JS做出列表展开收缩扩展功能，列表展开收缩功能是一个非常实用的功能，这篇文章就给大家好好分析一下。

无标题文档

ul,h2\{margin:0; padding:0;\}

li\{list-style-type:none;\}

\#list\{margin:0 auto; border:\#333 solid 1px; width:250px;\}

\#list h2 \{background: url(../img/ico1.gif) no-repeat 5px 14px \#0C6; text-indent:20px; height:32px; line-height:32px;\}

\#list ul li\{text-indent:25px; border-bottom:\#333 solid 1px; line-height:24px; height:23px; \}

\#list .active\{background: url(../img/ico2.gif) no-repeat 5px 14px \#693; text-indent:20px; height:30px; line-height:30px;\}

\#list ul\{display:none;\}

.hover\{background:\#CFC;\}

window.onload = function()\{

var oUl = document.getElementById("list");

var aUl =oUl.getElementsByTagName("ul");

var aH2 = oUl.getElementsByTagName("h2");

var aLi = null;

var arrLi = \[\];

var that = null;

for(i=0;i

aH2\[i\].index = i;

aH2\[i\].onclick = function()\{

if(this.className=='')\{

for(i=0;i

aH2\[i\].className='';

aUl\[i\].style.display='none';

\}

this.className='active';

aUl\[this.index\].style.display = 'block';

\}else\{

this.className='';

aUl\[this.index\].style.display='none';

\}

\}

\}

for(i=0;i

aLi =aUl\[i\].getElementsByTagName("li");

for(j=0;j

arrLi.push(aLi\[j\]);

\}

\}

for(var i=0;i

arrLi\[i\].onclick = function()\{

for(i=0; i

arrLi\[i\].className='';

\}

this.className = 'hover';

\}

\}

\};

## 我的好友 ##

张三张四张五张六

## 企业好友 ##

*  李四
 *  李小四
 *  李四二
 *  李毅
 *  李二

## 黑名单 ##

*  张三
 *  李四

相信看了以上介绍你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flex的Tree全部展开收缩，ji展开选中单个节点

//全部展开 private function ExpandAll():void \{ // treeMenu.dataProvider是id为treeMenu所

迈不过友情╰/ 2023年08月17日 15:51/ 0 赞/ 94 阅读

相关 uni-app圆形菜单展开收缩特效

template: <view class="menu" :class="{active:menuFlag}"> <image src="../../s

朴灿烈づ我的快乐病毒、/ 2022年11月21日 09:53/ 0 赞/ 354 阅读

相关 php 展开收缩,怎样用JS做出列表展开收缩扩展功能

这次给大家带来的是怎样用JS做出列表展开收缩扩展功能，列表展开收缩功能是一个非常实用的功能，这篇文章就给大家好好分析一下。无标题文档 ul,h2\{margin:0; p

阳光穿透心脏的1/2处/ 2022年10月22日 02:53/ 0 赞/ 171 阅读

相关 JS之三级竖向展开/收缩导航菜单

准备如下：在相对的images文件夹下放三个小图标： ![图片][20170207164410002] open.gif、 ![图片][201702071644194

骑猪看日落/ 2022年07月12日 02:23/ 0 赞/ 152 阅读

相关 JS之三级竖向展开/收缩导航菜单

准备如下：在相对的images文件夹下放三个小图标： ![图片][20170207164410002] open.gif、 ![图片][201702071644194

约定不等于承诺〃/ 2022年07月12日 02:23/ 0 赞/ 148 阅读

相关 jquery展开收缩列表

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" />

曾经终败给现在/ 2022年06月10日 13:54/ 0 赞/ 238 阅读

相关收缩/展开导航（推荐） (

`<script type="text/javascript"> if (document.getElementById){ //DynamicDrive.com change

梦里梦外;/ 2022年04月16日 03:10/ 0 赞/ 216 阅读

相关微信小程序 - 展开收缩列表

代码源自于：微信小程序示例官方 ![1060535-20180930151520057-273280452.gif][] ![1060535-201809301520502

柔光的暖阳◎/ 2022年03月27日 14:12/ 0 赞/ 633 阅读

相关 Android列表收缩与展开仿QQ好友列表（非常详细，附源码）

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

迈不过友情╰/ 2021年09月10日 11:48/ 0 赞/ 486 阅读

相关 flutter 点击可展开收缩列表组件ExpansionPanelList

点击可展开收缩列表组件必须放在可滚动组件里 ExpansionPanelList( expansionCallb

青旅半醒/ 2021年07月24日 22:38/ 0 赞/ 1282 阅读