子菜单在偶数调整中不可见(响应)

时间:2017-01-26 09:12:46

标签: jquery css responsive

我正在使用jQuery创建一个子菜单。

我已经开始研究超过700像素宽的屏幕尺寸,但是当视口低于此值并再次将其调整得更大时,子菜单会断开(但仍然可以在700像素以下的宽度上工作)。

所以基本上看起来脚本不知道如何在访问较低分辨率后将响应子菜单恢复正常。我在这里做错了什么?

  

解决了以下行: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

小提琴

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

0 个答案:

没有答案