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

【问题标题】：Open and close different divs through clicking menu通过单击菜单打开和关闭不同的 div
【发布时间】：2019-08-31 07:50:11
【问题描述】：

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

我有两列；左边是一个菜单，右边是我想显示不同 div 的空间。我的意图是：

当您单击菜单项时，相关的 div 会出现在右侧。（即显示：块）
当您再次单击同一菜单项时，相关 div 关闭（即显示：无）
单击菜单时项目，相关的 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>

【问题讨论】：

标签： javascript css onclick toggle visibility

【解决方案1】：

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

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，是否会将 hideContent 更改为“display:block”而不是“none”，并将 div 的 CSS 更改为它们在页面加载时为“display:none”？
@jordanmiller，我已经更新了最初隐藏内容的答案，请检查:)

【解决方案2】：

我不会让它不可见，只是将它偏移很多，然后将该值设置为全局变量，然后将其设置为 CSS 位置属性。记得使位置相对！

【讨论】：