javascript - 双击显示/隐藏多个 div 双击不起作用

Question

在这里，我想打开/关闭 div，它工作正常。但是当我双击同一个按钮时，div 消失了，它应该在点击时可见。任何人都可以向我建议正确的方向。

var divs = ["Div1", "Div2"];
var visibleDivId = null;

function divVisibility(divId) {
  if (visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
  var i, divId, div;
  for (i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);
    if (visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="main_div">
  <div class="buttons">
    <a href="#" onclick="divVisibility('Div1');">On</a> |
    <a href="#" onclick="divVisibility('Div2');">Off</a> |
  </div>
  <div class="inner_div">
    <div id="Div1">I'm Div One</div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
  </div>
</div>

标签： javascripthtmljquerycss

Answer 1

请将hideNonVisibleDivs();方法移到其他部分

var divs = ["Div1", "Div2"];
var visibleDivId = null;

function divVisibility(divId) {
  if (visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
    hideNonVisibleDivs();
  }
  
}

function hideNonVisibleDivs() {
  var i, divId, div;
  for (i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);
    if (visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="main_div">
  <div class="buttons">
    <a href="#" onclick="divVisibility('Div1');">On</a> |
    <a href="#" onclick="divVisibility('Div2');">Off</a> |
  </div>
  <div class="inner_div">
    <div id="Div1">I'm Div One</div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
  </div>
</div>