Брехня, всё срабатывает.
Бегом гуглить, что такое всплытие событий.
Надо его останавливать:
const $section = $('.section').on('click', () => $section.addClass('opened'));
$section.find('.close').on('click', e => {
e.stopPropagation();
$section.removeClass('opened');
});
// или
const section = document.querySelector('.section');
section.addEventListener('click', () => section.classList.add('opened'));
section.querySelector('.close').addEventListener('click', e => (
e.stopPropagation(),
section.classList.remove('opened')
));
Или есть вариант ограничиться одним обработчиком, в котором проверять, откуда событие пришло:
const $section = $('section').click(e => {
$section.toggleClass('opened', !$(e.target).is('.close'));
});
// или
document.querySelector('.section').addEventListener('click', e => {
e.currentTarget.classList.toggle('opened', !e.target.matches('.close'));
});
