Как переключить div, который скрыт при загрузке страницы

Question

Я использую следующие js, чтобы скрыть и показать мой div

function myFunction(test) {
    var x = document.getElementById(test);

    if (x.style.display == "none") {
        //x.style.display = "block";
        x.style.setProperty("display", "block", "important")
    } else {
        //x.style.display = "none";
        x.style.setProperty("display", "none", "important")
    }
}

У меня есть все div, скрытые при загрузке с использованием класса, который работает, но вам нужно дважды щелкнуть ссылку, чтобы получить это, чтобы показать. Как я могу исправить это, чтобы отобразить при первом клике?

Страница, над которой я работаю, находится здесь, вы можете нажать на любой из заголовков, чтобы развернуть какой-то раздел. (Проигнорируйте форматирование, это очень большая работа.)

http://thinkularity.eth.link

Answer 1

Лучше, если вы создадите другой класс , чтобы показать элемент и переключать этот класс при каждом нажатии, используя DOMTokenList.toggle():

Метод toggle() интерфейса DOMTokenList удаляет указанный токен из списка и возвращает false. Если токен не существует, он добавляется, и функция возвращает true.

Демо:

function myFunction(test) {
  var x = document.getElementById(test);
  x.classList.toggle('showElement');
}

.showNotes{
  display: none;
}
.showElement{
  display: block !important;
}

<h2><a onclick="myFunction('e23')" href="#23">023 Autonomy Day</a></h2>
<div class="showNotes" id="e23">
  This is my DIV element.
</div>
<h2><a onclick="myFunction('e22')" href="#22">022 Skateboarding In An Embassy</a></h2>
<div class="showNotes" id="e22">
  This is my DIV element.
</div>

Answer 2

Очень простой и простой способ решения вашей проблемы - сначала проверить if (x.style.display == "block") и, если есть что-то еще, отобразить скрытый контент. Другой способ - включить встроенный стиль в код html, чтобы свойство style объекта DOM сразу после рендеринга имело некоторое начальное свойство.

function myFunction(test) {
    var x = document.getElementById(test);
    if (x.style.display == "block") { 
        x.style.display = "none"; 
    } else { 
        x.style.display = "block"; 
    }
}

#test {
    display:none;
}

<h3 onclick="myFunction('test')">Click to toggle display</h3><br>
<div id="test">Now you see me</div><br>

Answer 3

Ваша проблема - проверка перед применением стиля. При первом щелчке элемент устанавливается на display: none, потому что при загрузке страницы элемент не имеет установленного свойства display, поэтому, когда ваш код проверяет if (x.style.display == "none"), он получает false - поэтому он устанавливает его на display: none , Использование свойства style Node ссылается на фактическое свойство style элемента HTML и включает , а не включает CSS свойства.

Я бы лично создал два класса , .hidden и .visible и используйте Node.classList.toggle для переключения класса элемента, но ваш подход тоже работает.

Мы можем изменить ваш if / else на switch/case (или if / else if / else) установить действие по умолчанию, если элемент не имеет установленного свойства style.display - вместо того, чтобы скрывать его по умолчанию, как это происходит здесь, мы установим display: block по умолчанию.

function toggleHide(test) {
  var x = document.getElementById(test);

  var newValue;
  var visible = "block";
  var hidden = "none";
  
  switch(x.style.display) {
    case hidden:
      // show if hidden
      newValue = visible;
      break;
    
    case visible:
      // hide if visible
      newValue = hidden;
      break;
    
    default:
      // visible if style.display not set yet
      newValue = visible;
      break;
  }
  
  // clear out style.display
  x.style.setProperty("display", "");
  // set new value
  x.style.setProperty("display", newValue);
}

// call toggleHide on header click
document.getElementById("header").addEventListener("click",
  e => toggleHide("abc")
);

.dropdown {
  display: none;
}

<h1 id="header">Click me</h1>
<p id="abc" class="dropdown">This is hidden by default</p>