javascript显示隐藏层比较不错的方法分析


Posted in Javascript onSeptember 30, 2008

这是一个Q&A的页面,设计师希望能够点击相关的问题后,在它下方显示对应的答案。这是一个比较常见功能,通常的解决办法是把“答案”当作整个问题容器的子元素,然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。

但是当初写html的时候并没有考虑到脚本编写(需求是后加的),所以,答案和标题没有父子关系可以对应。 html代码如下。

所以,这里需要用到另一种方法来匹配答案和标题。我们可以通过捕捉元素的位置来匹配它们。也就是说第一条标题,对应的肯定是整个序列中的第一条答案,第二条标题对应的肯定是第二条答案。 这样就可以无视html结构来控制它们的对应关系了。

<ul class="qusetionList"> 
<li class="liHeader"><span class="colABC-A">??</span><span class="colABC-B">?祟}</span><span class="colABC-C">??者/???者</span></li> <li class="liBody"><span class="colABC-A">1</span><span class="colABC-B">想要?小店需要付???</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li> 
<li class="answer"><span class="colABC-B"> 
??段於策?其所以不收取任何?用,?使用者不用??摹?lt;BR> 
除了加值服?盏墓δ苣=M之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li> 
<li class="liBody"><span class="colABC-A">2</span><span class="colABC-B">想要?小店需要付???</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li> 
<li class="answer"><span class="colABC-B"> 
??段於策?其所以不收取任何?用,?使用者不用??摹?lt;BR> 
除了加值服?盏墓δ苣=M之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li> 
</ul>

脚本解释:当点击openLink这个图标时,显示和openLink在序列中位置相同的answer。这里需要将onclick事件放在闭包里面,等到for循环结束后才被激活。如果没有这层闭包,那不管点击哪个openLink,显示的都将是openLink.length的值。

document.getElementsByClassName = function(eleClassName) 
{ 
var getEleClass = [];//定义一个数组 
var myclass = new RegExp("\\b"+eleClassName+"\\b");//创建一个正则表达式对像 
var elem = this.getElementsByTagName("*");//获取文档里所有的元素 
for(var h=0;h<elem.length;h++) 
{ 
var classes = elem[h].className;//获取class对像 
if (myclass.test(classes)) getEleClass.push(elem[h]);//正则比较,取到想要的CLASS对像 
} 
return getEleClass;//返回数组 
} 
//上面这是捕捉class的方法,我一直用它,复制过来就OK。 var answer = document.getElementsByClassName("answer"); 
var openLink = document.getElementsByClassName("openLink"); 
var closeLink = document.getElementsByClassName("closeLink"); 
for (i = 0; i< openLink.length ; i++ ) 
{ 
( 
function(i){ 
openLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "block" 
} 
closeLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "none" 
} 
} 
)(i); 
}
Javascript 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
javascript不同页面传值的改进版
Sep 30 #Javascript
简明json介绍
Sep 28 #Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 #Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 #Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 #Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 #Javascript
js每次Title显示不同的名言
Sep 25 #Javascript
You might like
PHP输入输出流学习笔记
2015/05/12 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php pdo操作数据库示例
2017/03/10 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
详细分析python3的reduce函数
2017/12/05 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python有参函数使用代码实例
2020/01/06 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
旅游个人求职信范文
2014/01/30 职场文书
财政专业求职信范文
2014/02/19 职场文书
协议书样本
2014/04/23 职场文书
青年文明号口号
2014/06/17 职场文书
学生会辞职信
2015/03/02 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2016年元旦主持词
2015/07/06 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js