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

Question

我在使用JavaScript时无法打开和关闭div之间的可见性。

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

1. 单击菜单项时，相关的div出现在右侧。 （即显示：阻止）

2. 再次单击同一菜单项时， 相关div关闭（即显示：无）

3. 当您单击菜单时 项，相关的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

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

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>

Answer 2

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