Объектно-ориентированная реализация связи dom-элемента и javascript-объекта
Столкнулся со следующей проблемой: нужно разработать механизм сворачивания. При клике на ссылке показывается или скрывается блок с контентом. Реализация должна быть объектно-ориентированная, требуется написать класс es6+ или функцию конструктор ~es5, инкапсулирующий в себе работу с dom элементами и событиями. Пример разметки:
<div class="simple-collapse"> <a href="#" class="collapse-control">Control</a> <div class="collapse-content"></div> </div> <script type="text/javascript"> var obSimpleCollapse = new SimpleCollapse(".simple-collapse"); obSimpleCollapse.init(); </script> |
scv,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<div class="simple-collapse">
<a href="#" class="collapse-control">Control</a>
<div class="collapse-content" hidden>Content</div>
</div>
<script>
class SimpleCollapse {
constructor(selector) {
this.elem = document.querySelector(selector);
}
init() {
this.elem.querySelector('a').onclick = this.toggleContent.bind(this);
}
toggleContent() {
this.elem.querySelector('.collapse-content').hidden = !this.elem.querySelector('.collapse-content').hidden
}
}
var obSimpleCollapse = new SimpleCollapse(".simple-collapse");
obSimpleCollapse.init();
</script>
|
Выше человек написал решение... babel для экспорта модуля вам в помощь...
Для скрытия элемента:
document.getElementById("myP").style.visibility = "hidden";
Или
document.getElementById("myP1").style.display = "none";
Подробнее https://www.w3schools.com/jsref/prop...visibility.asp |
| Часовой пояс GMT +3, время: 17:26. |