Как изменить класс после клика jquery?

Question

[lemonlimelike]

Вот есть меню

<div class="touch_menu">
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
	</div>

Нужно чтоб по клику на него оно поворачивалось

.touch_menu{display:none; position:absolute; cursor:pointer; border:2px solid #4c4c4c; padding:3px}
.touch_menu_turn{
	transform: rotate(90deg);
}

то есть чтоб к меню добавлялся класс .touch_menu_turn

К этому меню у меня уже есть код на jQuery

$(document).ready(function(){
			var touch = $('.touch_menu');
			var menu = $('.category');

		$(touch).on('click', function(e){
			e.preventDefault();
			menu.slideToggle();
		});
		$(window).resize(function(){
			var wid = $(window).width();
			if(wid > 500 && menu.is(':hidden')){
				menu.removeAttr('style');
			}
		});	

	});

Но он лишь делает элементы находящиеся в меню display:block, как сделать, чтоб меню поворачивалось

Answer 1

[profesor08]

document.querySelector(".touch_menu").addEventListener("click", function(event) {
  event.preventDefault();
  this.classList.add("touch_menu_turn");
});

Comments

[lemonlimelike]

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

[profesor08]

if (this.classList.contains("touch_menu_turn"))
{
  this.classList.remove("touch_menu_turn");
}
else
{
  this.classList.add("touch_menu_turn");
}