Jquery collapse/expand issue

JavaScript
1

Hi,
I’m experimenting with using jquery to alter the main navigation from (what will be) a traditional dropdown menu to an expanding/collapsing menu when the screen width is at a mobile-view level.

This is the dev site… http://tinytim.adwin.ca/

And this is the code…


<script type="text/javascript">
    var $j = jQuery.noConflict();    

    $j(document).ready(function() {                        
      if($j(window).width() < 650) {                              
      // run this only if screen is less than 650px wide
        $j('.menu-item a').addClass('expand'); 
        $j('.sub-menu').addClass('collapse'); 
        $j(".collapse").hide();
        jQuery(".expand").click(function()
        {
          jQuery(this).toggleClass("active").next(".collapse").slideToggle(50);
        });
      }
    });

    $j(window).resize(function() {
      if ($j(window).width() < 650) {
        // do something 
        $j('.menu-item a').addClass('expand'); 
        $j('.sub-menu').addClass('collapse'); 
        $j(".collapse").hide();
        jQuery(".expand").click(function()
        {
          jQuery(this).toggleClass("active").next(".collapse").slideToggle(50);
        });
      } else {
        $j(".sub-menu").css("display", "block");              
      } 
      });
</script>

The colour of the background changes as a way of tracking the activity of the media queries. Blue/Yellow represent a “mobile” view and Pink/Green is the “desktop” view.

Now technically the code as it stands now works because if you simply load the browser at a particular width it will generate the right menu display. However if you scale the browser width from big to small or from small to big and back to small and then click on one of the expanding menu items (either “Design Services” or “Web Services”), it glitches all over the place.

I’m curious if anyone might have a suggestion on how to make it properly work after resizing.

Thanks!

2

Nevermind. I’ve opted to abandon this layout option.