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

这是一个Q&A的页面，设计师希望能够点击相关的问题后，在它下方显示对应的答案。这是一个比较常见功能，通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。但是当初写html的时候并没有考虑到脚本编写（需求是后加的），所以，答案和标题没有父子关系可以对应。 html代码如下。所以，这里需要用到另一种方法来匹配答案和标题。我们可以通过捕捉元素的位置来匹配它们。也就是说第一条标题，对应的肯定是整个序列中的第一条答案，第二条标题对应的肯定是第二条答案。这样就可以无视html结构来控制它们的对应关系了。复制代码代码如下:<ul class="qusetionList"> <li class="liHeader">編號標題編輯者/發問者</li> <li class="liBody">1想要開小店需要付費嗎?<a href="#" title="" class="openLink"></a> 客服</li> <li class="answer"> 現階段於策視其所以不收取任何費用，請使用者不用擔心。 除了加值服務的功能模組之外。<a href="#" title="" class="closeLink"></a> 客服</li> <li class="liBody">2想要開小店需要付費嗎?<a href="#" title="" class="openLink"></a> 客服</li> <li class="answer"> 現階段於策視其所以不收取任何費用，請使用者不用擔心。 除了加值服務的功能模組之外。<a href="#" title="" class="closeLink"></a> 客服</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); }

　　推荐阅读

　　文本框点击时文字消失，失去焦点时文字出现

文本框点击时文字消失，失去焦点时文字出现 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]>>>详细阅读

本文标题：javascript显示隐藏层比较不错的方法分析

地址：http://www.17bianji.com/kaifa2/JS/29369.html

1/2 1