Question

我有几个div，我正在使用按钮进行显示（即-打开和关闭），但是我试图使行为略有变化。相反，我希望它们打开并关闭其他的（当前正在发生），但是如果再次按下该div的按钮，我不希望当前的div关闭。当前，当您按下div的按钮时，它会显示出来，并隐藏其他任何按钮。如果再次按下同一按钮，它将关闭div，因此看不到任何内容。我希望当前的div保持打开状态。因此，按下按钮将显示其为div，但不会将其关闭。这就是我目前正在使用的。

var divs = ["Div1", "Div2", "Div3"];
        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";
            }
          }
        }

<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="10">
  <tbody>
    <tr>
      <td><button onclick="divVisibility('Div1');">Div1</button></td>
      <td><button onclick="divVisibility('Div2');">Div2</button></td>
      <td><button onclick="divVisibility('Div3');">Div1</button></td>
    </tr>
  </tbody>
</table>

<table>
<div id="Div1">
    Div1 Content
    </div>
    <div id="Div2" style="display: none;">
    Div2 Content
    </div>
    <div id="Div3" style="display: none;">
    Div3 Content
    </div>
</table>

有什么想法可以防止再次按下按钮时显示的div切换？

Answer 1

嗨，而不是将它设置为null（等于），只需立即返回

if(visibleDivId === divId) {
        //visibleDivId = null;
        return;
      } else {

Answer 2

如果您对此感兴趣，可以采用另一种方法。使用事件和data-for属性。

// Simple hide all function, using a class identifier to get all Divs to hide.
const hideAll = () => document.querySelectorAll('.content').forEach(e => e.style.display = 'none');

// Use event delegation, then if we add or remove buttons it still works
document.addEventListener('click', (e) => {
  // if one of our buttons was clicked, do something.
  if(e.target.matches('.divButton')) {
    // Hide all first.
    hideAll();
    // Show the div, identified using the data-for attribute.
    document.querySelector(`#${e.target.dataset.for}`).style.display = 'block';
  }
});

<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="10">
  <tbody>
    <tr>
      <td><button class="divButton" data-for="Div1">Div1</button></td>
      <td><button class="divButton" data-for="Div2">Div2</button></td>
      <td><button class="divButton" data-for="Div3">Div3</button></td>
    </tr>
  </tbody>
</table>

<table>
<div id="Div1" class="content">
    Div1 Content
    </div>
    <div id="Div2" class="content" style="display: none;">
    Div2 Content
    </div>
    <div id="Div3" class="content" style="display: none;">
    Div3 Content
    </div>
</table>

Answer 3

您不需要两个功能。只需将与divId对应的div设置为可见，然后隐藏其余部分即可。然后，无论单击同一按钮多少次，该div都会显示出来。

var divs = ["Div1", "Div2", "Div3"];
function divVisibility(divId) {
  for (var div of divs) {
    if (div === divId) {
    	document.getElementById(div).style.display = 'block';
    }
    else {
    	document.getElementById(div).style.display = 'none';
    }
  }
}

<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="10">
  <tbody>
    <tr>
      <td><button onclick="divVisibility('Div1');">Div1</button></td>
      <td><button onclick="divVisibility('Div2');">Div2</button></td>
      <td><button onclick="divVisibility('Div3');">Div3</button></td>
    </tr>
  </tbody>
</table>

<table>
<div id="Div1">
    Div1 Content
    </div>
    <div id="Div2" style="display: none;">
    Div2 Content
    </div>
    <div id="Div3" style="display: none;">
    Div3 Content
    </div>
</table>

Answer 4

您可能也不需要循环。这是一种简单的切换方式：

function toggleDiv(divId) {
  const div = document.getElementById(divId);
  const visible = div.style.display === "block";
  div.style.display = visible ? "none" : "block";
}

<table style="margin-left: auto; margin-right: auto;" border="0" cellpadding="10">
  <tbody>
    <tr>
      <td><button onclick="toggleDiv('Div1');">Div1</button></td>
      <td><button onclick="toggleDiv('Div2');">Div2</button></td>
      <td><button onclick="toggleDiv('Div3');">Div3</button></td>
    </tr>
  </tbody>
</table>

<table>
<div id="Div1">
    Div1 Content
    </div>
    <div id="Div2" style="display: none;">
    Div2 Content
    </div>
    <div id="Div3" style="display: none;">
    Div3 Content
    </div>
</table>

不要隐藏切换的div

4 个答案: