jQuery - клик и добавление класса, вызывающее другой (связанный) клик

Question

Я создаю меню. Меню ниже.

$('.category').mouseover(function() { $(this).removeClass('category').addClass('categoryhover'); }).mouseout(function() { $(this).removeClass('categoryhover').addClass('category'); });
$('.category').click(function() { $('.catmenu').removeClass('catmenu').addClass('hide'); $('.categoryact').removeClass('categoryact').addClass('category'); $('.hide', this).removeClass('hide').addClass('catmenu'); $(this).removeClass('category').addClass('categoryact'); });
$('.categoryact').live('click', function() { $('.catmenu').removeClass('catmenu').addClass('hide'); $(this).removeClass('categoryact').addClass('category'); });

Нажатие на элемент div с категорией категории даст этой категории новый класс (categoryact) и покажет его подменю. Предположительно, щелкнув по нему еще раз, он будет скрыт. Однако, когда событие, которое дает нажатому div его новый класс (categoryact), также запускается функция его скрытия. Результатом, конечно, является то, что первый щелчок, чтобы показать подменю, кажется, ничего не делает. Конечно, мы знаем, что на самом деле стреляет другой.

Может кто-нибудь сказать мне, почему это вызывает "скрыть" функциональность, и возможный способ это исправить? Или, блин, способ написать это проще. Там происходит много add / remove-Class. ;)

Спасибо.

Answer 1

(скопировано из комментариев, чтобы можно было принять ответ)

Не будет ли проще с помощью функций jQuery toggle () и toggleClass () ? ... таким образом, вам может вообще не понадобиться привязка live (), так как простой click () переключит класс и подменю