扩展div时出错

Question

我遇到了一个关于可扩展div的问题。下面是我的代码：

HTML：

<div><a href="javascript:showHide('expand');">more...</a></div>
<div class="expand" style="display:none">
  YO DAWgGG
</div>

JS：

<script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementsByClassName("expand").style.display == 'none'){
      document.getElementsByClassName("expand").style.display = '';
    } else {
      document.getElementsByClassName("expand").style.display = 'none';
    }
  }
  </script>

它说扩展是未定义的。但我不明白为什么。我做错了什么？如果我使用一个ID，同样的代码也可以工作，但是我需要在多个div中使用它。

谢谢!

Answer 1

当getElementsByClassName返回一个object数组时，您需要执行document.getElementsByClassName("expand")[0]。

​

function showHide(el){
    if (document.getElementsByClassName(el)[0].style.display == 'none'){
      document.getElementsByClassName(el)[0].style.display = '';
    } else {
      document.getElementsByClassName(el)[0].style.display = 'none';
    }
  }

<div><a href="javascript:showHide('expand');">more...</a></div>
<div class="expand" style="display:none">
  YO DAWgGG
</div>

​

基于现有的标记。我建议使用document.querySelectorAll，而不是设置元素样式，切换它的类。

​

var links = document.querySelectorAll('.link');
for (var i=0; i<links.length; i++) {
  links[i].addEventListener('click', function(e){
    e.target.parentElement.nextElementSibling.classList.toggle('show');
  })
}

.expand {
  display: none;
}

.expand.show {
  display: block;
}

<div><a class="link" href="#">more...</a></div>
<div class="expand">
  YO DAWgGG 1111
</div>


<div><a class="link" href="#">more...</a></div>
<div class="expand">
  YO DAWgGG 222
</div>


<div><a class="link" href="#">more...</a></div>
<div class="expand">
  YO DAWgGG 333
</div>

​

Answer 2

document.getElementsByClassName返回一个HTMLCollection，而不是HTMLElement，因此你不能在集合上使用.style。

因此，如果需要在集合的所有元素上应用一些样式，则需要迭代并应用。

这是你可以做的。

​

document.addEventListener('DOMContentLoaded', function() {
  let anchors = document.querySelectorAll(".more");

  [].forEach.call(anchors, (anchor) => {
    anchor.addEventListener("click", (event) => {
      event.preventDefault();
      let parent = event.target.parentNode;
      let ele = parent.querySelector(".expand");
      if (ele.style.display == 'none') {
        ele.style.display = '';
      } else {
        ele.style.display = 'none';
      }
    })
  })
});

<div><a class="more" href="#">more...</a>
  <div class="expand" style="display:none">
    YO DAWgGG
  </div>
</div>
<div><a class="more" href="#">more-2-...</a>
  <div class="expand" style="display:none">
    YO DAWgGG-2
  </div>
</div>

​