0

I'm making a submenu with jQuery.

I've got it working on screen sizes over 700 pixels wide, but when the viewport goes lower than that and again resize it bigger, the submenu goes and breaks (still works on the width under 700 pixels though).

So basically it seems like the script does not know how to return the responsive submenu back to normal after visiting the lower resolution. What am I doing wrong here?

Resolved with the line: el2.off();

jQuery

jQuery(function( $ ){

$(document).ready(function(){

    /*
    * @name: setDimensions
    * @author: *******
    * @versio: 0.1
    * @description: Vigila el tamaño de la pantalla
    * @date: 2016/04/04
    *
    * @param: none
    * @return: none
    */

    delay = 250,
    throttled = false,
    calls = 0;

    function setDimensions(){
        responsiveMenu();
    };


    // window.resize event listener
    window.addEventListener('resize', function() {
        // only run if we're not throttled
      if (!throttled) {
        // actual callback action
        setDimensions();
        // we're throttled!
        throttled = true;
        // set a timeout to un-throttle
        setTimeout(function() {
          throttled = false;
        }, delay);
      }  
    });

    setDimensions();

    /*
    * @name: responsiveMenu
    * @author: *****
    * @versio: 0.1
    * @description: 
    * @date: 2016/04/04
    *
    * @param: none
    * @return: none
    */
    function responsiveMenu(){

        var el = $("#menu_principal");
        var el2 = $(".levelFather");

        if (window.matchMedia("(max-width: 700px)").matches) {
            if(!el.hasClass("responsive-menu")){
                el.addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

                $(".responsive-menu-icon").click(function(){
                    $("#menu_principal").toggleClass("openMenu");
                });
            }
            if(!el2.hasClass("responsive-submenu")){
                el2.addClass("responsive-submenu");

                el2.click(function(){
                    $(this).toggleClass("open");
                });

            }

        }else{

            if(el.hasClass("responsive-menu")){
                el.removeClass("responsive-menu");
                if(el.hasClass("openMenu")){el.removeClass("openMenu");}
                el.prev().remove();
            }

            if(el2.hasClass("responsive-submenu")){
                el2.off(); <----
                el2.removeClass("responsive-submenu");
                if(el2.hasClass("open")){el2.removeClass("open");}
            }



            $("#menu_principal").removeAttr("style");
        }

    }


}); //End $(document).ready

}); //End jQuery function

Fiddle

https://jsfiddle.net/IvanOrtiz/m4payfuo/5/

I.Ortiz
  • 1
  • 4
  • you should provide a fiddle including your HTML code... ;) – jsadev.net Jan 26 '17 at 09:29
  • Here is the fiddle – I.Ortiz Jan 26 '17 at 09:52
  • Why don't you try the good old fashioned **@media** Queries CSS to do it instead of using JavaScript/jQuery??? Here is a link from W3Schools : http://www.w3schools.com/css/css_rwd_mediaqueries.asp – Umair Shah Jan 26 '17 at 12:15
  • Hello Umair. Because In a movile I need to open with a click, not an hover. In desktop is open with an hover. – I.Ortiz Jan 26 '17 at 12:17
  • I think it would really help you to get to know the situation better...you can take a look at : http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices – Umair Shah Jan 26 '17 at 12:22
  • The touchscreen mobile phones touch also behaves like a hover so when you click on the element it should work as hover..as you are being able to do in desktop..! Fore intensive details please do read the above question in the comment..! – Umair Shah Jan 26 '17 at 12:25
  • I resolved it with a line with this line of code: `if(el2.hasClass("responsive-submenu")){ el2.off();<---- el2.removeClass("responsive-submenu"); if(el2.hasClass("open")){el2.removeClass("open");} }` – I.Ortiz Jan 26 '17 at 13:22

0 Answers0