Как при клике убрать активный класс?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Как при клике на "Клик" закрывать и открывать блок? получилось только открыть, а по обратному клику закрыть никак. Спасибо
snippet

Дополнительно:

Немного упростим главный код и исправим названия класса.
Активный класс, если это БЭМ или типа БЭМ, должен быть не _active, а fits-cars-showmore-content_active, ну и с остальными соответственно.
Так же разделим название для data атрибутов, чтобы у кнопок и контента они различались, так желательно в данной семантике. Либо в дата атрибут передавать айди кого будем дёргать. Тут уже на усмотрение разработчика в зависимости от дельнейшего пути
Сам цикл упростим (но желательно конечно вернуть/добавить проверки аргументов, существования элементов и тп, я убрал для наглядности.).

const autoBtns = document.querySelectorAll('.block-tabs-main-home__item'); 	autoBtns.forEach(     btn => {       btn.addEventListener("click", (e) => {			         const contentId = btn.getAttribute("data-content-id");              document             .querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`)             .forEach( (el) =>               el.classList.toggle('fits-cars-showmore-content_active')             ) 	        }       );     }   );

const autoBtns = document.querySelectorAll('.block-tabs-main-home__item'); autoBtns.forEach( btn => { btn.addEventListener("click", (e) => { const contentId = btn.getAttribute("data-content-id"); document .querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`) .forEach( (el) => el.classList.toggle('fits-cars-showmore-content_active') ) } ); } );

Обновил пример, забыл что вы хотели закрывать и другие. В любом случае действий мы выполняем меньше, чем обходя безусловно все элементы. Здесь мы обходим только те кто открыт и тот у кого айди совпадается
Рабочий пример
snippet

У вас все элементы по клику на кнопку закрываются, а потом срабатывает toggle на выбранном, поэтому он не закрывается. Самый простой вариант - toggle для совпадающих id, а remove для остальных

autoContents.forEach(content => { 				let attr = btn.getAttribute("data-id"); 				if (content.getAttribute("data-id") == attr) { 					btn.classList.toggle('_active') 					content.classList.toggle("_active"); 				} else {           content.classList.remove("_active");         } 			});

autoContents.forEach(content => { let attr = btn.getAttribute("data-id"); if (content.getAttribute("data-id") == attr) { btn.classList.toggle('_active') content.classList.toggle("_active"); } else { content.classList.remove("_active"); } });

upd. Сократил решение

  • Всё равно не очень хорошо обходить все. Одно дело события на кнопки развесить, но зачем по всем с контентом обходить? Я предложил чуть более эффективный подход, обход только активных.
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Андрей PHP Ответ

Для того чтобы убрать активный класс при клике на элементе, можно использовать JavaScript. Вам нужно добавить обработчик события на элемент, который будет удалять активный класс при клике.

Пример решения данной проблемы с использованием jQuery:

$(document).ready(function(){
  $('.your-element').click(function(){
    $(this).removeClass('active');
  });
});

$(document).ready(function(){ $('.your-element').click(function(){ $(this).removeClass('active'); }); });

В данном примере мы добавляем обработчик события click на элемент с классом "your-element". При клике на этот элемент, у него будет удален класс "active", который делает его активным.

Если вы хотите реализовать это без использования jQuery, то можно сделать это с помощью чистого JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var elements = document.querySelectorAll('.your-element');
 
  elements.forEach(function(element) {
    element.addEventListener('click', function() {
      element.classList.remove('active');
    });
  });
});

document.addEventListener('DOMContentLoaded', function() { var elements = document.querySelectorAll('.your-element'); elements.forEach(function(element) { element.addEventListener('click', function() { element.classList.remove('active'); }); }); });

В этом примере мы используем метод querySelectorAll для выбора всех элементов с классом "your-element" и добавляем обработчик события click на каждый из них. При клике на элемент, у него будет удален класс "active".

Надеюсь, это поможет вам решить вашу проблему с удалением активного класса при клике на элементе. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ