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 相关文章推荐
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
VUE 自定义组件模板的方法详解
Aug 30 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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 mvc开发模式的感想
2011/06/28 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
Destoon实现多表查询示例
2014/08/21 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python 切换root 执行命令的方法
2019/01/19 Python
python生成器用法实例详解
2019/11/22 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python数据类型强制转换实例详解
2020/06/22 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
高考标语大全
2014/06/05 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Python类方法总结讲解
2021/07/26 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript