`
哈达f
  • 浏览: 120328 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

列表收缩

 
阅读更多 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
table{
	border:#0066FF 1px solid;
	}
table td{
	border:#0000FF 1px solid;
	background-color:#00CCFF;
	}
table td div{
	background-color:#66FFCC;
	display:none;
	}
table td a:link,table td a:visited{
	text-decoration:none;
	color:#993300;
	}
	
.open{
	display:block;
	}
.close{
	display:none;
	}
</style>


<script type="text/javascript">
function list2()
{
	var aNode = event.srcElement;
	var tdNode = aNode.parentNode;
	var divNode = tdNode.getElementsByTagName("div")[0];
	//alert(divNode.nodeName);
	
	var tabNode = document.getElementsByTagName("table")[0];
	
	var divNodes = tabNode.getElementsByTagName("div");
	for(var x=0 ; x<divNodes.length; x++)
	{
		if(divNodes[x]==divNode)
		{
			if(divNode.className == "open")
			{
				divNode.className = "close";
			}
			else
			{
				divNode.className = "open";
			}
		}
		else
			divNodes[x].className = "close";
	}
	
	
}
</script>
</head>

<body>

<table>
	<tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
    
    
    <tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
    
    <tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
    
    <tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
    <tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
    <tr>
    	<td>
        	<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
            <div>
            	撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
                撒旦防撒旦法<br/>
            </div>
        </td>
    </tr>
</table>

</body>
</html>
 
分享到：
| 动态创建表格，删除行列
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    列表收缩-JavaScript

    在JavaScript编程中，“列表收缩”通常是指一种交互设计，它允许用户通过点击或者触发某个事件来隐藏或显示列表中的部分详细信息，以提高界面的可读性和用户体验。这种功能广泛应用于数据列表、菜单、评论区等场景。...

    android列表收缩与展开仿QQ好友列表

    在Android开发中，为了优化用户体验，我们经常需要实现列表的动态收缩与展开功能，这在很多社交应用中尤为常见，比如QQ好友列表。这个功能可以让用户更方便地管理和浏览大量信息，提高操作效率。本篇将详细介绍如何...

    实现qq列表收缩效果（cell收缩）

    在iOS开发中，实现QQ列表收缩效果，即Cell收缩，是一种常见的交互设计，它能为用户带来更加丰富和直观的界面体验。这种效果通常应用于消息列表或者联系人列表，当用户点击某个单元格（Cell）时，该Cell会收起其部分...

    android列表收缩与展开

    本文将深入探讨如何在Android应用中实现`ExpandableListView`的列表收缩与展开功能，并介绍其工作原理。 首先，`ExpandableListView`是`ListView`的一个扩展，提供了更丰富的交互性。它允许每个条目（group）下包含...

    CSS3列表收缩展开详情预览特效.zip

    标题中的“CSS3列表收缩展开详情预览特效”是指一种网页设计技术，它利用CSS3的新特性来实现列表项的动态交互效果。这种特效通常应用于导航菜单、文章列表或者信息展示区域，允许用户通过点击列表项来展开或收缩详细...

    CSS3下拉列表收缩展开特效.zip

    【CSS3下拉列表收缩展开特效】是一种在网页设计中常用的交互效果，它使得用户能够通过点击一个主选项来展开或收缩下拉菜单，展示更多选择。这种特效在导航栏、筛选器或设置菜单中常见，能提升用户体验，使页面交互...

    js代码 播放列表收缩展开 播放列表 左侧二级菜单 兼容主流浏览器

    本项目主要涉及的是使用JavaScript实现播放列表的收缩与展开功能，同时包含左侧二级菜单的设计，且整个解决方案兼容主流浏览器，如Chrome、Firefox、Safari、Edge等。 首先，`global.css`是全局样式表文件，它负责...

    Android仿QQ好友列表实现列表收缩与展开

    在Android开发中，有时我们需要实现具有分组和收缩功能的列表，例如模仿QQ的好友列表。这时，我们可以使用`ExpandableListView`控件，它提供了多级列表视图，允许用户展开或收起各个组来查看或隐藏子项。本文将详细...

    CSS3下拉列表收缩展开特效

    本主题聚焦于“CSS3下拉列表收缩展开特效”，这是一个利用CSS3的transform属性来实现的交互式菜单设计。这种特效常见于导航栏，提供用户友好的体验，尤其是当网站有多个层次的分类时。 1. **CSS3 Transform属性**：...

    CSS3列表收缩展开详情预览特效

    在本文中，我们将深入探讨如何实现“CSS3列表收缩展开详情预览特效”。这个特效是网页设计中的一个常见功能，通常用于产品展示或信息列表，它允许用户通过点击列表项来展开或收缩详细内容，从而提供更友好的用户体验...

    可展开和收缩的jquery FAQ问答列表特效

    本文将详细探讨"可展开和收缩的jQuery FAQ问答列表特效"这一主题，以及它在实际应用中的相关知识点。 首先，FAQ（Frequently Asked Questions，常见问题）问答列表是网站上常见的一种信息展示方式，它帮助用户快速...

    产品列表收缩展开详情预览特效

    "产品列表收缩展开详情预览特效"是一个利用JavaScript和CSS3技术实现的高级功能，它为新款产品的展示提供了创新且引人入胜的方式。这个特效使得产品列表在用户交互时能够进行动态的收缩和展开，提供了一个优雅的细节...

    jquery css3用户列表导航展开收缩下拉菜单代码

    本教程将详细讲解如何利用 `jQuery` 和 `CSS3` 设计一个可展开收缩的用户列表导航菜单，这种下拉菜单常见于网站的顶部导航栏，便于用户快捷地访问各个子页面。 首先，我们需要理解 `jQuery` 是一个轻量级的...

    ios-商品订单列表扩展收缩显示 附带一个简单的HUD.zip

    一、加载cell的时候动态的计算高度 OrderDetailTableViewCell *cell = [self cellAtCellDicWithIndexPath:indexPath]; float cellHight=cell?(cell.isExpand?cell.cellHight.selectedHight:cell.cellHight....

    三级竖向展开/收缩导航菜单

    在HTML中，`&lt;ul&gt;`和`&lt;li&gt;`元素常用于创建列表结构，可以用来构建菜单。CSS则用于定义菜单的外观，如颜色、字体、位置以及展开和收缩的动画效果。例如，可以使用`:hover`伪类来触发二级菜单的显示，使用JavaScript...

    jquery 实现下拉收缩菜单

    实现效果 点击标题名如“帮助”后下拉出“帮助”的子元素 再次点击“帮助”后列表收缩回去 代码和样式很简单。希望对各位有帮助 自己回去改改便可

    jQuery手机端常见问题列表展开收缩代码

    在本示例中，"jQuery手机端常见问题列表展开收缩代码"是一个利用jQuery.mobile.js插件设计的功能，适用于手机移动端的FAQ（常见问题）页面。这个功能允许用户点击问题标题来展开或收缩对应的答案，提高用户体验，...

    iphone QQ列表的收缩展开,带动画效果

    在iOS开发中，实现类似iPhone QQ列表的收缩展开并带有动画效果是一项常见的需求。这种功能在用户界面设计中被广泛采用，以提供更直观、更动态的交互体验。以下是关于如何实现这一特性的详细讲解： 1. **UITableView...

Magicbox
Global site tag (gtag.js) - Google Analytics