Открывайте и закрывайте различные div'ы через меню - PullRequest
Новая
       46

Открывайте и закрывайте различные div'ы через меню

2 голосов
/ 10 апреля 2019

У меня проблемы с JavaScript, связанные с включением и выключением видимости между 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>

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Вы можете добавить похожие классы к элементам, чтобы использовать их в качестве ссылки. Затем переключите один класс в соответствующий выбранный контейнер: 

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>
0 голосов
/ 10 апреля 2019

Я бы вместо того, чтобы сделать его невидимым, просто сместить его на много, затем установить это значение как глобальную переменную, а затем просто установить его в атрибут позиции CSS.Не забудьте сделать положение относительно!

...