jQuery - Add a class on click, remove it on Hover

Question

I've got a simple jquery menu set up... it works fine except for the parent item. I've only listed one parent item, but there may be many, so raw #id won't work for this either. I want to apply a class when it is CLICKED, but then remove that class when the user hovers elsewhere and the menu slides away.

Here is what I have so far that isn't working for me.

    <script type="text/javascript">
        $(document).ready(function () {

            $("ul.topnav li a").click(function () {
                $(this).parent().find("ul.subnav").slideDown('fast').show();

                $(this).parent().hover(function () {
                }, function () {
                    $(this).parent().find("ul.subnav").slideUp('slow');
                    $(this).parent().removeClass("subhover");
                });
            }).before(function () {
                $(this).addClass("subhover");
            });
        });

<ul class="topnav">
  <li><a href="#">Item 1</a></li>
  <li class="dropdownmenu">
     <a href="#">Menu Parent</a>
     <ul class="subnav">
        <li>Item</li>
     </ul>
  </li>
</ul>

Answer 1

I think I've found the answer...

It works, but something just doesn't feel right about it. I can't help but think there should be a more recursive way to do it all in one function...

    <script type="text/javascript">
        $(document).ready(function () {

            $('.dropdown a').click(function () {
                $(this).addClass("subhover");
            });

            $("ul.topnav li a").click(function () {
                $(this).parent().find("ul.subnav").slideDown('fast').show();

                $(this).parent().hover(function () {
                }, function () {
                    $(this).parent().find("ul.subnav").slideUp('fast');
                    $(this).parent().find("a").removeClass("subhover");
                });
            });
        });
</script>

Answer 2

I'm not really sure what you're trying to do with .before, but either way, it's not being used the right way. It's meant to insert elements before the selected one, and as far as I know, doesn't take a function.

It's also not a good idea to bind events inside other event's functions unless you unbind them later. This could potentially cause issues if the user were to click multiple times. You can also use the mouseleave method rather than one empty hover function.

$("ul.topnav li a").click(function () {
   $(this).parent().find("ul.subnav").slideDown('fast').show();
}).parent().mouseleave(function(){
   $(this).find("ul.subnav").slideUp('slow');
   $(this).removeClass("subhover");
});

This will bind the click event to the anchor, and bind the mouseleave function to the parent li.

Answer 3

You don't even need to dynamically bind and unbind the events, just set a status variable:

    $(document).ready(function () {
        var doNavigationHoverEffect=false;

        $("ul.topnav li a").click(function () {
            $(this).parent().find("ul.subnav").slideDown('fast').show();
            doNavigationHoverEffect=true;
        });

        $("ul.topnav li").hover(function () {     //I changed this a bit to make more sense
                $(this).addClass("subhover");
            }, function () {
                $(this).find("ul.subnav").slideUp('slow');
                $(this).removeClass("subhover");
            });


    });

you may need to change it a little depending on when you want the hover effect on and off.