Question

我找到了这段代码：

<html>
<head>
  <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
      document.getElementById(elementid).style.display = '';
    } else {
      document.getElementById(elementid).style.display = 'none';
    }
  }
  </script>
</head>
<body>
  <div><a href="javascript:showHide('div_1035677');">more...</a></div>
  <div id="div_1035677" style="display:none">
    HIDDEN CONTENT
  </div>
  <div><a href="javascript:showHide('div_1035678');">more...</a></div>
  <div id="div_1035678" style="display:none">
    HIDDEN CONTENT
  </div>

现在，它允许使用我的网站的人扩展所有内容。我只想一次允许一个。因此，如果他们点击另一个，它会自动关闭所有其他人。你怎么能用纯粹的js做到这一点？

Answer 1

你可以把你想要自动关闭的所有div放到一个名为hiders的类中，或者放在showHide()函数中，然后再使它们可见，使该类的所有成员都不可见。像这样：

function showHide(elementid){

    var hiders = document.getElementsByClassName("hiders");
      for(var i =0;i<hiders.length;i++){
        hiders[i].style.display = "none";
      }

    if (document.getElementById(elementid).style.display == 'none'){
      document.getElementById(elementid).style.display = '';
    } else {
      document.getElementById(elementid).style.display = 'none';
    }
}

<div><a href="javascript:showHide('div_1035677');">more...</a></div>
<div class="hiders" id="div_1035677" style="display:none">
    HIDDEN CONTENT
</div>
<div><a href="javascript:showHide('div_1035678');">more...</a></div>
<div class="hiders" id="div_1035678" style="display:none">
    HIDDEN CONTENT
</div>

一次只显示一个展开javascript用切换显示内容

1 个答案: