javascript - 展开 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，则相同的代码可以工作，但我需要这个 ID 来用于多个 div。

谢谢!

Answer 1

您需要执行 document.getElementsByClassName("expand")[0] 因为 getElementsByClassName 返回一个对象数组。

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>