通过点击菜单打开和关闭不同的div

Question

我的 JavaScript 在 div 秒之间打开和关闭可见性时遇到问题。

我有两列；左边是菜单，右边是 space，我想在其中显示不同的 div。我的意图是：

当你点击一个菜单项时，相关的div出现在右边。（即显示：块）
当您再次单击同一菜单项时，相关 div 关闭（即显示：none）
当您单击菜单时项目，相关的 div 打开，所有其他打开的 div 关闭。

我已经让它几乎按照我想要的方式工作，尽管当前的问题是打开 div 需要点击两次。另外，由于我是 javascript 的新手，我想我的代码比它需要的要繁琐得多。我看过类似的例子，但我找不到答案。任何帮助将不胜感激！

function switchVisible() {
  if (document.getElementById('hidden1')) {
      if (document.getElementById('hidden1').style.display == 'none') {
          document.getElementById('hidden1').style.display = 'block';
          document.getElementById('hidden2').style.display = 'none';
  document.getElementById('hidden3').style.display = 'none';
      }
      else {
  document.getElementById('hidden1').style.display = 'none';
      }
  }
}



function switchVisible2() {
  if (document.getElementById('hidden2')) {

      if (document.getElementById('hidden2').style.display == 'none') {
          document.getElementById('hidden2').style.display = 'block';
          document.getElementById('hidden1').style.display = 'none';
  document.getElementById('hidden3').style.display = 'none';
      }
      else {
          document.getElementById('hidden2').style.display = 'none';

      }
  }
}


function switchVisible3() {
  if (document.getElementById('hidden3')) {

      if (document.getElementById('hidden3').style.display == 'none') {
          document.getElementById('hidden3').style.display = 'block';
          document.getElementById('hidden1').style.display = 'none';
  document.getElementById('hidden2').style.display = 'none';
      }
      else {
          document.getElementById('hidden3').style.display = 'none';

      }
  }
}

<div class="leftcolumn">

  <div class="leftmenu">

    <div class="subheader" onclick="switchVisible()">Content 1</div>

    <div class="subheader" onclick="switchVisible2()">Content 2</div>

    <div class="subheader" onclick="switchVisible3()">Content 3</div>

  </div>

</div>

<div class="rightcolumn">

  <div id="hidden1">

    Content 1

  </div>

  <div id="hidden2">

    Content 2

  </div>

  <div id="hidden3">

    Content 3

  </div>
  
</div>

Answer 1

我不会让它不可见只是为了抵消它很多然后将该值设置为全局变量然后将它设置为 CSS 位置属性。记得做相对位置！

Answer 2

您可以将类似的 class 添加到元素中以将其用作参考。然后在匹配的点击容器中切换一个 class：

function switchVisible(el) {
  var classN = el.classList.value.split(' ')[1];
  if(classN == 'c1'){
    document.querySelector('.rightcolumn .c1').classList.toggle('hideContent');
  }
  else if(classN == 'c2'){
    document.querySelector('.rightcolumn .c2').classList.toggle('hideContent');
  }
  else if(classN == 'c3'){
    document.querySelector('.rightcolumn .c3').classList.toggle('hideContent');
  }
  
  var arrayOfElements = document.querySelectorAll('.rightcolumn div').forEach(function(div,i){
    if(!div.classList.value.includes(classN) && !div.classList.value.includes('hideContent')){
      div.classList.toggle('hideContent');
    }
  });
}

.rightcolumn div {
  font-size:20px;
  color: green;
}
.hideContent{
  display:none;
}

<div class="leftcolumn">

  <div class="leftmenu">

    <div class="subheader c1" onclick="switchVisible(this)">Content 1</div>

    <div class="subheader c2" onclick="switchVisible(this)">Content 2</div>

    <div class="subheader c3" onclick="switchVisible(this)">Content 3</div>

  </div>

</div>

<div class="rightcolumn">

  <div id="hidden1" class="c1 hideContent">Content 1</div>
  <div id="hidden2" class="c2 hideContent">Content 2</div>
  <div id="hidden3" class="c3 hideContent">Content 3</div>

</div>

通过点击菜单打开和关闭不同的div

Open and close different divs through clicking menu

javascript

css

visibility

onclick

toggle