Открыть закрыть функцию?

Question

Я нашел функцию на Ozzu.com, которая удовлетворяет только моим потребностям, проблема в том, что я не понимаю, что происходит на 100%, не могли бы вы рассказать мне, что происходит здесь

function toggle(id) {
  var e = document.getElementById(id);

  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}

, а затем этозаходит на страницу источника

Answer 1

Вы модифицируете свойство CSS display элемента HTML с помощью идентификатора «content», по щелчку мыши, через JavaScript.Каждый раз, когда вы вызываете функцию toggle, она выполняет следующие действия:

if (document.getElementById("content").style.display == '') {
  document.getElementById("content").style.display = 'none';
} else {
  document.getElementById("content").style.display = '';
}

Если вы установите для свойства display значение 'none', элемент HTML с идентификатором «content» не будет отображаться.,Если вы установите пустую строку (""), он будет использовать значение по умолчанию для этого HTML-элемента (что видно во всех случаях).

Answer 2

Однако лучше сделать это

function toggle(id) {
  var e = document.getElementById(id);
  e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here
  return false; // cancel the click !
}


<a href="#" onclick="return toggle('content')">Toggle</a>

или ненавязчиво:

window.onload=function() {
  document.getElementById('toggleLink').onclick=function() {
    var e = document.getElementById('content');
    e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here
    return false; // cancel the click !
  }
}


<a href="#" id="toggleLink"">Toggle</a>

Answer 3

Событие onclick добавлено к узлу. Так что, когда вы кликните по нему, он вызовет toggle и также передаст аргумент content

• Функция toggle получает один аргумент, который используется в качестве идентификатора.

• Используя этот идентификатор, он получит элемент от DOM.

• С элементом, сохраненным в e, он затем проверяет атрибуты стиля, чтобы увидеть, на что установлено свойство "display".

• Если свойство представляет собой пустую строку (то есть не установлено), то оно устанавливает его так, чтобы оно не отображалось. Точно так же, если он уже настроен на отображение ни одного, тогда он будет пустым. (Таким образом, показывая это снова).

Как примечание, на самом деле это не очень хороший способ сделать это, поскольку предполагается, что у элементов не изменились настройки отображения.