栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

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

复制代码 代码如下:

  • 編號標題編輯者/發問者


  • 1想要開小店需要付費嗎? 客服


  • 現階段於策視其所以不收取任何費用,請使用者不用擔心。

    除了加值服務的功能模組之外。 客服


  • 2想要開小店需要付費嗎? 客服


  • 現階段於策視其所以不收取任何費用,請使用者不用擔心。

    除了加值服務的功能模組之外。 客服




脚本解释:当点击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{
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);
}
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/118983.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号