переключить div, чтобы одновременно был открыт только один, но можно было закрыть их все javascript

Question

У меня есть эти div, которые я могу переключать onclick, чтобы увеличивать масштаб по одному. Он работает отлично, за исключением того, что если один увеличивается, то всегда увеличивается. Для этого я использую toggleOpen. Я ищу возможность сделать так, чтобы он мог делать то, что уже делает, но затем при нажатии увеличенного div он возвращается go к исходному размеру без необходимости переключаться с другим div. Другими словами, мне нужен способ вернуть страницу go в состояние, в котором все блоки div имеют исходный размер. Я пробовал операторы else безрезультатно, а также добавил еще одну функцию для удаления класса. Мне нужно только решение js - пожалуйста, не jquery или что-нибудь еще. Вот его часть JS.

const event = document.querySelectorAll('.eventsBorder')

function toggleOpen() {
    let opened = document.getElementsByClassName('large')[0];
    if(opened!=undefined)
        opened.classList.toggle('large');
    this.classList.toggle('large');
} 

event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));

Вот мой codepen

Заранее спасибо за любую помощь!

Answer 1

Переменная opened возвращает вам список всех HTML элементов, которые имеют класс large, и когда вы снова нажимаете на уже увеличенный div, который автоматически удовлетворяет этим критериям. Итак, происходит следующее: если вы дважды щелкните один и тот же элемент, ваша функция toggleOpen сначала удалит класс large из этого элемента, а затем снова добавит его из-за следующей строки в вашем коде -

this.classList.toggle('large');

Лучший способ добиться желаемого - это убедиться, что помимо того, что opened не является undefined, вы также должны убедиться, что opened не тот элемент, который вы щелкнули. Вы можете выполнить sh это, используя-

if(opened != undefined && opened != this)

Вот ссылка на обновленный codepen , чтобы увидеть его в действии.

Answer 2

Итак, похоже, что вы используете querySelectorAll для выбора всех элементов с классом «large», а затем переключаете класс. Если вы переключите класс, он больше не будет частью этого выбора запроса, поскольку к нему больше не применяется этот класс, поэтому он не сможет его удалить.

const event = document.querySelectorAll('.eventsBorder')

event.forEach(eventsBorder => 
              eventsBorder.onclick = () => 
              eventsBorder.classList.toggle('large'));

Кажется, это выполнено sh что бы вы хотели.