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

 更新时间:2008年09月30日 00:34:20   作者:  
通常的解决办法是把“答案”当作整个问题容器的子元素,然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
这是一个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">
現階段於策視其所以不收取任何費用,請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</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">
現階段於策視其所以不收取任何費用,請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</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);
}

相关文章

  • 使用canvas实现仿新浪微博头像截取上传功能

    使用canvas实现仿新浪微博头像截取上传功能

    用户提供图像大小尺寸不合适,如何用截取上传呢?接下来小编教大家使用使用canvas实现仿新浪微博头像截取上传功能解决问题,需要的朋友一起学习吧。
    2015-09-09
  • 用innerhtml提高页面打开速度的方法

    用innerhtml提高页面打开速度的方法

    这篇文章介绍了用innerhtml提高页面打开速度的方法,有需要的朋友可以参考一下
    2013-08-08
  • 关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

    今天小编就为大家分享一篇关于ckeditor在bootstrap中modal中弹框无法输入的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript取整函数及向零取整几种常用的方法

    Javascript取整函数及向零取整几种常用的方法

    这篇文章主要介绍了Javascript取整函数及向零取整几种常用的方法,每种方法都有其特点和适用场景,推荐使用Math.trunc(),因为它语义明确、代码易读且性能较好,需要的朋友可以参考下
    2025-01-01
  • js实现音乐播放器

    js实现音乐播放器

    这篇文章主要为大家详细介绍了js实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • antd-mobile ListView长列表的数据更新遇到的坑

    antd-mobile ListView长列表的数据更新遇到的坑

    这篇文章主要介绍了antd-mobile ListView长列表的数据更新遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • VsCode插件整理(小结)

    VsCode插件整理(小结)

    这篇文章主要介绍了VsCode插件整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 以BootStrap Tab为例写一个前端组件

    以BootStrap Tab为例写一个前端组件

    本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,具体示例代码大家参考下本文
    2017-07-07
  • 学习并汇集javascript匿名函数

    学习并汇集javascript匿名函数

    接触jQuery很长时间了,对其的实现有太多疑问,可谓只知道皮毛,对其的精髓一窍不通,可悲啊!所以有必要研究下其中的原理。
    2010-11-11
  • js控制的遮罩层实例介绍

    js控制的遮罩层实例介绍

    把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了。在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你
    2013-05-05

最新评论