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

您需要执行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>

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>

扩展div时出错

2 个答案: