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

  这是一个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);

  }