Блог

Главная - Вопросы по программированию - Не скрывать переключенный div

Не скрывать переключенный div

#javascript #html

#javascript #HTML

Вопрос:

У меня есть несколько разделов, для отображения которых я использую кнопки (т. Е. — включение и выключение), но я пытаюсь немного изменить поведение. Вместо этого я хочу, чтобы они включались, а остальные отключались (что в данный момент и происходит), но я не хочу, чтобы текущий 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 при повторном нажатии на его кнопку?

Комментарии:

1. Ну, вы намеренно устанавливаете visibleDivId значение null , если нажатая кнопка соответствует текущему видимому div — вот почему она исчезает. Вы могли бы просто избавиться от этого условия и просто иметь else (выразить как if (visibleDivId !== divId) . Но на самом деле это слишком большой и слишком сложный код для очень простой задачи. Просто переключите некоторые классы и задайте для классов значение «видимый» или «нет» в вашем CSS.

Ответ №1:

Привет, вместо того, чтобы присваивать ему значение null, если равно, просто верните его немедленно

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

Ответ №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>

Ответ №3:

Вероятно, вам также не нужно выполнять цикл. Вот простой способ переключения:

 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>

Ответ №4:

Для этого вам не нужны две функции. Просто установите div, соответствующий divId , видимым, а остальное скройте. Тогда не имеет значения, сколько раз вы нажмете одну и ту же кнопку, этот 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>