Не работает сценарий у элемента с изменяющимся классом!!!
 

Всем привет. Столкнулся со странной проблемой. Вообщем есть тег div с классом "navbar-toggle". Событие "onclick" меняет класс с "navbar-toggle" на "navbar-toggle-active".

<div class="navbar-toggle" onclick="this.className = (this.className == 'navbar-toggle' ? 'navbar-toggle-active' : 'navbar-toggle')">...</div>

Что касается скрипта - написал такую конструкцию (изначально у элемента "main-menu" стоит "display:none;"). Далее при клике появляется необходимое меню, а класс меняется на "navbar-toggle-active". Однако при повторном клике меню должно исчезать по сценарию, но оно не исчезает, хотя я написал новому классу display:none;. При этом если выбрать другой посторонний элемент с другим классом, то сценарий работает, но не работает в случае с изменяющимся классом. Вообщем что делать - не знаю. За помощь заранее благодарен.

<script type="text/javascript">
	$(document).ready(function(){
		$(".navbar-toggle").click(function(){
			$("#main-menu").css({"display":"block"});
		});
		$(".navbar-toggle-active").click(function(){
			$("#main-menu").css({"display":"none"});
		});
	});
</script>

У меня вопрос заключается в том зачем нужны костыли с классом? Если только для того чтобы навесить события, то воспользуйтесь таким вариантом.

$('.navbar-toggle').click(function (e) {
	$('#main-menu').toggle();
});

Спасибо dd_smol. Ты очень мне помог. Просто я новичок в JS и jQuery. В данной ситуации проблема решена. На будущее постараюсь сам найти решение проблемы с классами и при положительном результате отпишусь в этой теме.