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

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

javascript html

一次只显示一个展开javascript使用切换显示内容,javascript,html,show,Javascript,Html,Show,我发现这个代码： <html> <head> <script type="text/javascript" charset="utf-8"> function showHide(elementid){ if (document.getElementById(elementid).style.display == 'none'){ document.getElementById(elementid).style.display = '

我发现这个代码：

<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>


函数showHide（elementid）{
if（document.getElementById（elementid.style.display=='none'）{
document.getElementById（elementid）.style.display=''；
}否则{
document.getElementById（elementid）.style.display='none'；
}
}
隐藏内容
隐藏内容

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

您可以将所有要自动关闭的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>

函数showHide（elementid）{
var hiders=document.getElementsByClassName（“hiders”）；
对于（var i=0；i您可以将所有要自动关闭的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>

函数showHide（elementid）{
var hiders=document.getElementsByClassName（“hiders”）；
对于（var i=0；i清除您试图实现的目标或askwhy不运行代码…它允许您同时扩展多个。我一次只希望扩展一个。不清楚您试图实现的目标或askwhy不运行代码…它允许您同时扩展多个。我一次只希望扩展一个。