Как кликать на вложенные элементы так, чтобы не кликался родительский элемент?
Например мне нужно кликать на Subsummary 1 чтобы открывался Subdropdown content 1, а не закрывался Summary 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Accordion Summary Example</title> <style> .data-accordion--summary-container { margin-bottom: 10px; padding: 10px; background-color: lightblue; cursor: pointer; } .dropdown { display: none; background-color: lightcoral; padding: 10px; } </style> </head> <body> <div class="data-accordion--summary-container"> Summary 1 <div class="dropdown"> Dropdown content 1 <div class="data-accordion--summary-container"> Subsummary 1 <div class="dropdown"> Subdropdown content 1 </div> </div> <div class="data-accordion--summary-container"> Subsummary 2 <div class="dropdown"> Subdropdown content 2 </div> </div> </div> </div> <div class="data-accordion--summary-container"> Summary 2 <div class="dropdown"> Dropdown content 2 </div> </div> <div class="data-accordion--summary-container"> Summary 3 <div class="dropdown"> Dropdown content 3 </div> </div> <script> // Function to find the closest ancestor with class "data-accordion--summary-container" function findClosestSummaryContainer(element) { while (element) { if (element.classList.contains('data-accordion--summary-container')) { return element; } element = element.parentElement; } return null; } // Attach click event listener to the document body document.body.addEventListener('click', function(event) { // Find the closest ancestor with class "data-accordion--summary-container" var summaryContainer = findClosestSummaryContainer(event.target); if (summaryContainer) { // Toggle the visibility of the dropdown associated with this container var dropdown = summaryContainer.querySelector('.dropdown'); if (dropdown) { // Hide dropdowns of other containers document.querySelectorAll('.dropdown').forEach(function(otherDropdown) { if (otherDropdown !== dropdown) { otherDropdown.style.display = 'none'; } }); // Toggle the visibility of this container's dropdown dropdown.style.display = (dropdown.style.display === 'block') ? 'none' : 'block'; } } }); </script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Accordion Summary Example</title> <style> .data-accordion--summary-container { margin-bottom: 10px; padding: 10px; background-color: lightblue; cursor: pointer; } .dropdown { display: none; background-color: lightcoral; padding: 10px; } </style> </head> <body> <div class="data-accordion--summary-container"> Summary 1 <div class="dropdown"> Dropdown content 1 <div class="data-accordion--summary-container"> Subsummary 1 <div class="dropdown"> Subdropdown content 1 </div> </div> <div class="data-accordion--summary-container"> Subsummary 2 <div class="dropdown"> Subdropdown content 2 </div> </div> </div> </div> <div class="data-accordion--summary-container"> Summary 2 <div class="dropdown"> Dropdown content 2 </div> </div> <div class="data-accordion--summary-container"> Summary 3 <div class="dropdown"> Dropdown content 3 </div> </div> <script> // Function to find the closest ancestor with class "data-accordion--summary-container" function findClosestSummaryContainer(element) { while (element) { if (element.classList.contains('data-accordion--summary-container')) { return element; } element = element.parentElement; } return null; } // Attach click event listener to the document body document.body.addEventListener('click', function(event) { // Find the closest ancestor with class "data-accordion--summary-container" var summaryContainer = findClosestSummaryContainer(event.target); if (summaryContainer) { // Toggle the visibility of the dropdown associated with this container var dropdown = summaryContainer.querySelector('.dropdown'); if (dropdown) { // Hide dropdowns of other containers document.querySelectorAll('.dropdown').forEach(function(otherDropdown) { if (otherDropdown !== dropdown) { otherDropdown.style.display = 'none'; } }); // Toggle the visibility of this container's dropdown dropdown.style.display = (dropdown.style.display === 'block') ? 'none' : 'block'; } } }); </script> </body> </html>
Дополнительно:
html структуру просто поменять достаточно.
Summary оборачиваешь в кнопку и уже на неё вешаешь открытие/закрытие. Аналогично с Subsummary.
Ответы:
1. https://developer.mozilla.org/en-US/docs/Web/API/E...
2. https://developer.mozilla.org/en-US/docs/Web/API/E...
хотя… там код c другой логикой:
snippet
.dropdown.show { display: block; } |
.dropdown.show { display: block; }
const accordionItemSelector = '.data-accordion--summary-container'; const contentSelector = '.dropdown'; const activeClass = 'show'; document.body.addEventListener('click', ({ target: t }) => { if (t.matches(accordionItemSelector)) { document.querySelectorAll(contentSelector).forEach(n => { if (!n.contains(t) && !t.contains(n)) { n.classList.remove(activeClass); }; }); t.querySelector(contentSelector).classList.toggle(activeClass); } }); |
const accordionItemSelector = '.data-accordion--summary-container'; const contentSelector = '.dropdown'; const activeClass = 'show'; document.body.addEventListener('click', ({ target: t }) => { if (t.matches(accordionItemSelector)) { document.querySelectorAll(contentSelector).forEach(n => { if (!n.contains(t) && !t.contains(n)) { n.classList.remove(activeClass); }; }); t.querySelector(contentSelector).classList.toggle(activeClass); } });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы кликать на вложенные элементы без того, чтобы кликался родительский элемент, можно использовать метод, который называется "event.stopPropagation()". Этот метод останавливает дальнейшее распространение события по DOM, что позволяет избежать срабатывания события на родительском элементе.
Пример использования этого метода в JavaScript:
const parentElement = document.getElementById('parentElement'); const childElement = document.getElementById('childElement'); childElement.addEventListener('click', function(event) { event.stopPropagation(); // Здесь можно добавить код, который будет выполняться при клике на дочерний элемент });
В данном примере, при клике на дочерний элемент "childElement", событие не будет распространяться на родительский элемент "parentElement", и клик на дочернем элементе будет обработан независимо от родительского элемента.
Таким образом, используя метод "event.stopPropagation()", можно предотвратить нежелательное срабатывание событий на родительском элементе при клике на вложенные элементы.