Question

I’m using the following code to cause a ul based dropdown menu to open, I have the css set up so that the ‘button’ changes color when you hover, but I need it to stay that color while the menu is open.

<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>

There aren’t any errors in firebug, the slide events work perfectly fine, maybe I’m not calling the right thing? #libg is the id of the li that contains the ‘button’. The clicked / notclicked classes only change the background-color.

http://jsfiddle.net/5tV45/

Answer 1

I expect you want to toggle the clicked class both times, so when it is removed, it is in the state of notclicked

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