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 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
Bootstrap基础学习
Jun 16 Javascript
javascript断点调试心得分享
Apr 23 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python文件名和文件路径操作实例
2017/09/29 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
24式加速你的Python(小结)
2019/06/13 Python
Django的Modelforms用法简介
2019/07/27 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
给幼儿园老师的表扬信
2014/01/19 职场文书
青年志愿者活动感想
2015/08/07 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
Python四款GUI图形界面库介绍
2022/06/05 Python