折叠效果
<!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>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
var lastFaqClick=null;//上次点击的faq
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点，也就是所有的答案
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}
/**
*取得元素的真实css属性
*written in 06.7 sheneyan
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
<style type="text/css">
*,html,body{margin:0;padding:0}
#faq dt{font-weight:bold;cursor:pointer}
#faq dd{display:none;}
</style>
</head>
<body>
<ul id="faq">
<li>
<dl><dt>问题1 </dt><dd>答：1 </dd></dl>
</li>
<li>
<dl><dt>问题2 </dt><dd>答：2 </dd></dl>
</li>
<li>
<dl><dt>问题3 </dt><dd>答：3 </dd></dl>
</li>
<li>
<dl><dt>问题4 </dt><dd>答：4 </dd></dl>
</li>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
在本案例中，“模拟iphone面板折叠的css3折叠效果”是一个利用CSS3特性实现的交互式插件，其目标是复制iPhone手机面板那种独特的折叠体验。这个插件允许图片以类似纸张的方式从两侧向中间折叠，最终展示出所有图片的...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...
在网页设计中，实现页面的折叠效果是一种常见的交互设计手法，它可以有效地节省空间，提高用户的浏览体验。这种效果常用于导航菜单、详细信息展示、代码示例等场景，让用户能够根据需要展开或隐藏具体内容。本篇文章...
"jQuery右侧滑动折叠效果导航菜单"是一种增强用户体验的交互设计，尤其适用于响应式网页，使得有限的屏幕空间得以高效利用。本文将详细讲解如何实现这种效果以及涉及的相关技术知识点。 一、jQuery库的使用 jQuery...
在iOS开发中，为了增强用户体验，开发者经常需要创建各种独特的视图效果，其中之一就是Cell的折叠效果。"OC实现的一款Cell折叠效果.zip"是一个开源项目，它提供了Objective-C语言实现的UITableViewCell的折叠动画...
折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧...
"Flex控件折叠效果"是一个常见的需求，它涉及到用户界面（UI）的动态性与可扩展性，使得用户能更有效地管理和浏览信息。本文将深入探讨Flex控件折叠效果的相关知识点，包括其工作原理、实现方式以及实际应用。 Flex...
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
`Tableview折叠效果`是为用户提供更加交互式体验的一种常见设计，用户可以点击某个单元格（cell）来展开或折叠其子项。这种功能在展示层级结构数据时非常有用，比如目录结构、分类列表或者层级菜单。 实现这个效果...
Python3.x+Pyqt5实现界面左侧导航栏的抽屉效果（折叠效果）；界面和业务分离案例01_自己写的，有UI界面源代码
ToolBar的折叠效果通常指的是在用户滚动内容时，ToolBar能够动态地隐藏或者展开，这能为用户提供更加沉浸式的浏览体验。这种效果常见于顶部导航栏或者底部TabBar，在滚动内容时，它们会随着滚动动态改变其显示状态。...
在Android开发中，实现独特的视觉效果能够提升用户体验，其中一种引人注目的特效就是“图片折叠效果”。这个“图片折叠效果的实现Demo源代码”提供了一个实现这种效果的方法，适用于那些希望在应用中添加新颖交互...
这个布局是Android设计支持库的一部分，主要用于实现类似Material Design中的滚动行为，尤其是标题栏的折叠效果。`CollapsingToolbarLayout`通常与`CoordinatorLayout`一起使用，以提供更高级别的布局管理。 `...
`TableView自定义Cell折叠效果`是一个高级功能，它能够增强用户体验，使信息展示更加有层次。本篇将深入讲解如何实现这一效果。 首先，我们要了解`Cell折叠效果`的核心原理。在UITableView中，每个Cell都是独立的，...
js 实现 div的折叠效果! 值得下载看看!资源免费,大家分享!!
在IT行业中，图片切换折叠效果是一种常见的用户界面（UI）设计元素，用于增强用户体验和吸引用户的注意力。这种效果常用于网站、应用或者软件中的相册、幻灯片展示等部分。"漂亮的图片切换折叠效果"描述的是一个图像...
在Android开发中，侧滑折叠效果是一种常见的交互设计，它能为用户带来新颖且直观的操作体验。本案例主要探讨如何实现这种效果，适用于那些想要学习并应用到自己应用中的开发者。 首先，我们要理解侧滑折叠效果的...
本示例中的"swift-折叠效果的UICollectionViewSwiftController"着重展示了如何实现一种特殊的折叠效果，这通常用于创建更加动态和交互性的用户界面。 在iOS应用开发中，折叠效果通常是通过自定义...
本项目“ios-UITableViewCell折叠效果.zip”主要关注如何实现UITableView中UITableViewCell的动态高度调整以及折叠拉伸效果，这是一项增强用户体验的重要技巧。下面我们将深入探讨这个主题。 首先，我们来理解`...
然而，有时我们希望实现更复杂的交互，比如“tableView的折叠效果”。这种效果允许用户点击某个组标题，以展开或收起该组下的所有行，提高用户体验并优化界面显示。在本教程中，我们将深入探讨如何通过自定义...