繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript显示隐藏层比较不错的方法分析
- Javascript
- 如何用js控制css中的float的代码
- Autocomplete Textbox Example javascript实现自动完成成功
- FormValid0.5版本发布，带ajax自定义验证例子
- wordpress之js库集合研究介绍
- 推荐发几个常用控件(新加DHTML控件)
- 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
- javascript下阻止表单重复提交、防刷新、防后退
- javascript下计数器每秒自动加1
- 给所有的超级练级都加上onmousemove时间的js代码
- js实现运行代码需要刷新的解决方法
- 兼容FF/IE跟随鼠标的层的效果
- 用javascript获得css中的属性值的代码
- 用javascript实现页内搜索的脚本代码
- 用javascript 控制表格行的展开和隐藏的代码
- 用javascript实现隐藏状态栏的代码
- Code: write(s,d) 输出连续字符串
- javascript创建页面蒙板的一些知识技巧总结
- 转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
- 用javascript判断输入数据是否货币并自动添加￥符号的代码
- js类中获取外部函数名的方法
Javascript 中的 javascript显示隐藏层比较不错的方法分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 199 ::
收藏到网摘: n/a
通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。 这是一个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);
}
评论 (0) All
