Как сделать чтобы .active удалялся если следующие или предыдущие элементы имеют его?

Question

[gazes12]

$('.menu__item').click(function(){
	$(this).toggleClass('active');
	
	if($(this).hasClass('active')){
		$(this).css({'background': 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(136,0,255,1) 1%, rgba(255,0,0,1) 100%)'});
		$(this).next('.sub_menu__list').css({'opacity': 1, 'visibility': 'visible'});
	} else{
		$(this).css({'background': 'inherit'});
		$(this).next('.sub_menu__list').css({'opacity': 0, 'visibility': 'hidden'});
	}
})

Answer 1

[WapSter]

$('.menu__item').click(function(){
  $('.menu__item').each(function() {
     $(this).removeClass('active')
  })
  $(this).toggleClass('active');
  
  // от кода ниже вообще можно избавится и прописать все на css
  if($(this).hasClass('active')){
    $(this).css({'background': 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(136,0,255,1) 1%, rgba(255,0,0,1) 100%)'});
    $(this).next('.sub_menu__list').css({'opacity': 1, 'visibility': 'visible'});
  } else{
    $(this).css({'background': 'inherit'});
    $(this).next('.sub_menu__list').css({'opacity': 0, 'visibility': 'hidden'});
  }
})

Comments

[Дмитрий Марков]

Можно проще)
$('.menu__item').not(this).removeClass('active');

Answer 2

[Александр Макаров]

$('.menu__item').click(function(){
  $('.menu__item.active').removeClass('active');
  $(this).addClass('active');
  
  // как и в ответе выше, рекомендую удалить
  if($(this).hasClass('active')){
    $(this).css({'background': 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(136,0,255,1) 1%, rgba(255,0,0,1) 100%)'});
    $(this).next('.sub_menu__list').css({'opacity': 1, 'visibility': 'visible'});
  } else{
    $(this).css({'background': 'inherit'});
    $(this).next('.sub_menu__list').css({'opacity': 0, 'visibility': 'hidden'});
  }
})