AzaBroflovski
@AzaBroflovski
js developer

Насколько хорош этот код? Или можно лучше?

Насколько хорош этот код? Или можно лучше?

<div class="dropdown">
	Button

	<div class="dropdown-menu">
		Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Заголовок скатился которой грамматики несколько что щеке, снова переулка! Взобравшись!
	</div>
</div>


function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}
document.onclick = function (e) {
  var clicked;

  for (var element = e.target; element; element = element.parentNode) {
    if (hasClass(element, 'dropdown')) {
      iterator = element.childNodes;
      for(var i = 0; i < iterator.length; i++) {
        var elem = iterator[i];
        if (hasClass(elem, 'dropdown-menu')) {
          var isVisible = elem.offsetWidth > 0 || elem.offsetHeight > 0;
          if (!(isVisible)) {
            elem.style.display = "block";
            element.className += " dropdown-open";
            clicked = element;
          }
        }
      }
    }
  }

  var iterator = document.getElementsByClassName('dropdown');
  for (var i = 0; i < iterator.length; i++) {
    var element = iterator[i];
    initerator = element.childNodes;
    for(var x = 0; x < initerator.length; x++) {
      var elem = initerator[x];
      if (hasClass(elem, 'dropdown-menu')) {
        var isVisible = elem.offsetWidth > 0 || elem.offsetHeight > 0;
        if (isVisible && clicked != element) {
          elem.style.display = "none";
          element.className = (element.className).replace("dropdown-open","");
        }
      } 
    }
  }
}


пример кода
  • Вопрос задан
  • 695 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Чем, в вашем случае, мотивирован отказ от jquery?
С использованием jquery код можно сократить раз в 10, как и затраченное на написание этих макарон время. А еще код был бы более читаемым и поддерживаемым.

Если все-таки решите перейти на сторону добра https://jsfiddle.net/b4x2kc4s/
Версия с делегированием на document https://jsfiddle.net/bg0bgr27/
Еще версия с отключением активного элемента, по клику вне dropdown https://jsfiddle.net/wmo4m2d7/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@abberati
frontend-разработчик
код настолько плох, что я его не читал
покликал, написал как-то так
Ответ написан
Exploding
@Exploding
wtf?
Может быть просто:
<details>
<summary>Button</summary>
Далеко-далеко за словесными горами в стране, гласных 
и согласных живут рыбные тексты. Заголовок скатился которой 
грамматики несколько что щеке, снова переулка! Взобравшись!
</details>


Ок, гугл, тогда второй вариант:
сделайте с checkbox+label. Checkbox спрятать, а следующий за label-ом div будет переключаться исходя из состояния checkbox-а
Норм?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы