Working dropdown menu in Wordpress “dropped” out function/links

Question

I followed this tutorial to a tee: http://mysitemyway.com/docs/index.php/Collapsible_sidebar_menus

My site here: http://inlightimage.com/

Links with # 'photography', 'design', and 'teaching' drop down beautifully and responsive, the pages listed below are not clickable/linked. Nothing moves.

If possible, I would love to know where I went wrong in copying and pasting.

I added to custom CSS:

.menu .dropdown .sub-menu { display: none; }

I added to custom JavaScript:

jQuery(document).ready(function(){
     jQuery('.menu .dropdown a').click(function(e){  
          e.preventDefault();
          if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
               jQuery(this).parent().children('.sub-menu:first').hide();
          } else {
               jQuery(this).parent().children('.sub-menu:first').show();
          }
     });
});

Perhaps it is not compatible with my theme? (Moka theme by ElmaStudio)

Thank you very much for any direction/help.

Answer 1

I'd try changing:

jQuery('.menu .dropdown a').click(function(e){ 

To:

jQuery('.menu .dropdown > a').click(function(e){ 

It looks like the selector was too generic and applying the preventDefault to all links instead of parent items.