Используя Jquery .toggle (), чтобы открыть выпадающее меню, нужна ссылка для изменения цвета при нажатии

Question

Я использую следующий код, чтобы открыть раскрывающееся меню на основе ul, у меня настроена CSS, так что «кнопка» меняет цвет при наведении курсора, но мне нужно, чтобы он оставался тем же цветом, пока меню открыт.

<script>
$(document).ready(function () {

$('#nav li').toggle(
    function () {
        //show its submenu
        $('ul', this).slideDown(100);
        $('#libg').toggleClass('clicked');
    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(100);
        $('#libg').toggleClass('notclicked');
    }
);
});
</script>

В firebug нет ошибок, события слайдов работают отлично, может быть, я не правильно звоню? #libg - это идентификатор li, который содержит кнопку. Классы, по которым щелкнули / не щелкнули, изменяют только цвет фона.

http://jsfiddle.net/5tV45/

Answer 1

Я ожидаю, что вы хотите переключить класс clicked оба раза, поэтому, когда он удален, он находится в состоянии notclicked

    // replace this...
    // $('#libg').toggleClass('notclicked');
    // with this...
    $('#libg').toggleClass('clicked');

Answer 2

Не могли бы вы просто установить цвет в функции?

$(this).css({color: '#f00'});

..., чтобы установить цвет, и ...

$(this).css({color: ''});

..., чтобы сбросить его.Хотя вам может быть лучше использовать add / removeClass

Answer 3

Вам просто нужно указать цвет в вашем классе «нажал» и переключить его в обеих функциях:

$('#nav li').toggle(
    function () {
        //show its submenu
        $('ul', this).slideDown(100);
        $('#libg').toggleClass('clicked');
    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(100);
        $('#libg').toggleClass('clicked');
    }
);

В вашей версии «щелкнул» класс слева от пункта меню при закрытии меню.