e.preventDefault();

e.preventDefault();

I've got an <li> that, when clicked, toggles the display of a div with a bunch of links in it.  I am using preventDefault() to stop the anchor tag associated with the <li> from navigating to the link (I, instead, want the sub-menu to display).  The problem is... using preventDefault() on the <li> removes the default behavior of all the links under the <li> tag -- including those in the sub-menu that I want to display.

The menu system is currently set up as a hover menu and the sub-menu drops down when a user hover over the <li> tag.  We want to test the exact same menu as a click menu... so I had to use preventDefault() to stop the click from going to the destination.  I have also added some code to look for clicks outside of the submenu and close it if the user clicks anywhere else on the page.

Is there another way (better way) to do this?  Here's the code I am currently working with:

  1. // Hide the menu initially and append the close link to it
     $('#topnav li .menu').hide().append('<span class="close" title="Dismiss"></span>');
                $('#topnav li').click(function(e) {
                    e.preventDefault(); //Remove default behavior
                    $('#topnav li .menu').hide(); //Hide any menu that might be open
                    $('#topnav li').removeClass('active'); //Remove the active class from all items in the menu
                    $(this).addClass('active'); //Add the active class to this menu item
                    $(this).children('.menu').toggle(); //Display the sub-menu
                });

                $('#topnav li .menu').mouseup(function() {
                    return false;
                });
               
                // If a user clisck outside of the sub-menu box
                $(document).mouseup(function(e) {
                    if ($(e.target).parent('#topnav li').length == 0) {
                        $('#topnav li').removeClass('active'); //Remove active class
                        $('#topnav li .menu').hide(); //Hide open sub-menu
                    }
                });
               
                // This is the code for the close link that gets appended to the sub-menu box
                $('#topnav li .menu .close').hover(
                    function() { $(this).addClass('hover'); },
                    function() { $(this).removeClass('hover'); }
                );

                $('#topnav li .menu .close').click(function() {
                    $(this).parent().fadeOut('fast', function() { $(this).hide(); $('#topnav li').removeClass('active'); });
                });






























Please let me know if you see something wrong with my code and/or if you need me to explain the scenario in more detail.  Essentially, I am making a click menu out of an existing hover menu and will A/B test the two.  I can't modify the the existing menu structure significantly... so I'm trying to implement a workaround.  When a user click on the <li>, I want to show the corresponding sub-menu.  Since the <li> currently contains a link to a page (for the hover menu), I need to adjust the behavior for the click menu only.  When the user clicks outside of the sub-menu <div>, I want to close the sub-menu.  When a user clicks a link in the sub-menu, I want the link to work (this is the piece of the puzzle that is currently not working... due to the use of preventDefault().  Uggh!

Thanks.