jQuery menu dissappears после изменения размера

Question

У меня есть отзывчивое меню, и все работает, только когда я изменяю размер меню, проверяю его несколькими щелчками, а затем изменяю его размер или накладываю на любой другой размер видового экрана, меню исчезает, и я должен обновите сайт, чтобы снова открыть меню.

Вот JQuery

$(document).ready(function() { 

    $('.menu > li:has(ul)').addClass('menu-dropdown-icon'); 
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI 

    $(".menu").before("<a href=\"#\" class=\"menu-mobile\">Izbornik</a>"); 

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu 
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed 
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu 
    //Done this way so it can be used with wordpress without any trouble 

    $(".menu > li").hover(function (e) { 
     if ($(window).width() > 943) { 
      $(this).children("ul").stop(true, false).slideToggle(600); 
      e.preventDefault(); 
     } 
    }); 
    //If width is more than 943px dropdowns are displayed on hover 

    $(".menu > li").click(function() { 
     if ($(window).width() <= 943) { 
      $(this).children("ul").fadeToggle(150); 
     } 
    }); 
    //If width is less or equal to 943px dropdowns are displayed on click 

    $(".menu-mobile").click(function (e) { 
     $(".menu").slideToggle(300); 
     e.preventDefault(); 
    }); 
    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story 

}); 

Я прокомментировал код, так что если кто-то хочет помочь мне может видеть то, что я сделал.

CSS:

.menu { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font-size: 1.4rem; 
    display: block; 
} 
.menu:before, 
.menu:after { 
    content: ""; 
    display: table; 
} 
.menu:after { 
    clear: both; 
} 
.menu > li { 
    float: left; 
    background-color: #1a2b3e; 
    padding: 0; 
    margin: 0; 
} 
.menu > li > a { 
    text-decoration: none; 
    padding: .7em 3em; 
    display: inline-block; 
    outline: 0 none; 
    color: #fff; 
} 
.menu > li:hover { 
    background: blue; 
} 
.menu > li:hover > a { 
    color: #fff; 
} 
.menu > li > ul { 
    display: none; 
    width: 100%; 
    background: #fff; 
    padding: 20px; 
    position: absolute; 
    z-index: 99; 
    left: 0; 
    color: #fff; 
    margin: 0; 
    list-style: none; 
    box-shadow: 0 7px 10px -5px rgba(0, 0, 0, 0.3); 
    background-color: #1a2b3e; 
} 
.menu > li > ul > li { 
    margin: 0; 
    padding: 15px; 
    list-style: none; 
    background: none; 
    float: left; 
    width: 33.333%; 
} 
.menu > li > ul > li a { 
    padding: .2em 0; 
    color: #fff; 
    display: block; 
    font-size: 1.5rem; 
    font-weight: 600; 
    border-bottom: 1px solid #f0f0f0; 
    text-transform: capitalize; 
} 
.menu > li > ul > li:last-child { 
    width: 17%; 
} 
.menu > li > ul > li:last-child > ul { 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1; 
} 
.menu > li > ul > li:nth-child(2) { 
    width: 49.666%; 
} 
.menu > li > ul > li:nth-child(2) > ul { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
} 
.menu > li > ul > li > ul { 
    display: block; 
    padding: 0; 
    margin: 0; 
    margin-top: 20px; 
    list-style: none; 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
} 
.menu > li > ul > li > ul > li { 
    width: 100%; 
    margin-bottom: 10px; 
    -webkit-column-break-inside: avoid; 
    /* Chrome, Safari */ 
    page-break-inside: avoid; 
    /* Theoretically FF 20+ */ 
    break-inside: avoid-column; 
    /* IE 11 */ 
    display: inline-block; 
    /* Actually FF 20+ */ 
} 
.menu > li > ul > li > ul > li a { 
    border: 0; 
    color: #fff; 
    font-weight: 300; 
    font-size: 1.4rem; 
    text-transform: none; 
    font-weight: 600; 
} 
.menu > li > ul > li > ul > li > ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.menu > li > ul > li > ul > li > ul > li { 
    margin: 0; 
    width: 100%; 
    float: left; 
} 
.menu > li > ul > li > ul > li > ul > li a { 
    font-weight: normal; 
    font-size: 1.2rem; 
} 
.menu > li > ul > li > ul > li > ul > li > ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.menu > li > ul > li > ul > li > ul > li > ul > li { 
    margin: 0; 
    width: 100%; 
    float: left; 
    margin: -5px 0; 
} 
.menu > li > ul > li > ul > li > ul > li > ul > li:last-child { 
    margin-bottom: 5px; 
} 
.menu > li > ul > li > ul > li > ul > li > ul > li a { 
    text-transform: capitalize; 
    font-weight: normal; 
    font-size: .9rem; 
} 

@media only screen and (max-width: 959px) { 
    .menu-container { 
    width: 100%; 
    } 
    .menu-mobile { 
    display: block; 
    } 
    .menu-dropdown-icon:before { 
    display: block; 
    } 
    .menu { 
    display: none; 
    } 
    .menu > li { 
    width: 100%; 
    float: none; 
    display: block; 
    } 
    .menu > li a { 
    padding: 1.5em; 
    width: 100%; 
    display: block; 
    } 
    .menu > li > ul { 
    position: relative; 
    } 
    .menu > li > ul > li { 
    float: none; 
    width: 100%; 
    border: 0; 
    display: block; 
    } 
    .menu > li > ul > li:first-child { 
    margin: 0; 
    } 
    .menu > li > ul > li > ul { 
    position: relative; 
    } 
    .menu > li > ul > li > ul > li { 
    float: none; 
    } 
} 

Вот живая ссылка http://jsfiddle.net/v12z4e66/1/

При изменении размера меню на запрос мобильного медиа и переключать в меню, при изменении размера обратно на рабочий стол меню не существует и обновленная страница

Answer 1

slideToggle() добавить встроенные стили в DOM. При нажатии на .mobileMenu ваш HTML в Devtools выглядит, что:

<ul class="menu" style="display: none;"> 
    ... 
</ul> 

Вместо того, чтобы использовать анимации в классах использования JQuery, например: addClass('show-on-menu); или toggleClass('show-on-mobile);

Тогда в ваших стилей вы можете сделать то, что вы хотите в медиа-запросы, поэтому .show-on-mobile можно игнорировать на экране> 960px;

Посмотрите на обновленный jsFiddle: http://jsfiddle.net/v12z4e66/3/