JQuery не отвечает на изменение размера браузера

Question

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

Вот мой JSFiddle, что демонстрирует мою проблему: http://jsfiddle.net/oxnerebo/

Если ваш браузер больше 500px, категория меню будет горизонтальной и скрытые дивы будут переключать ниже, охватывая ширину всех категорий.

Если ваш браузер меньше 500 пикселей, категории меню будут уложены друг над другом, а скрытые divs будут переключаться ниже выбранного div.

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

HTML:

<div id="mainContainer"> 
<div class="wrap"> 
<div id="div1">1</div> 
<div id="div2">2</div> 
<div id="div3">3</div> 
<div class="hiddenDiv1"></div> 
<div class="hiddenDiv2"></div> 
<div class="hiddenDiv3"></div></div> 
</div> 

Сценарий:

var screenWidth = $(window).width(); 

if(screenWidth < 500) { 
    $('.hiddenDiv1').appendTo($('#div1')); 
     $('.hiddenDiv2').appendTo($('#div2')); 
}; 


    $("#div1, .hiddenDiv1").click(function(){ 
    $(".hiddenDiv1").slideToggle(); 
    $(".hiddenDiv2").hide(); 
    $(".hiddenDiv3").hide(); 
    }); 
    $("#div2, .hiddenDiv2").click(function(){ 
    $(".hiddenDiv2").slideToggle(); 
    $(".hiddenDiv1").hide(); 
    $(".hiddenDiv3").hide(); 
    }); 
    $("#div3, .hiddenDiv3").click(function(){ 
    $(".hiddenDiv3").slideToggle(); 
    $(".hiddenDiv1").hide(); 
    $(".hiddenDiv2").hide(); 
    }); 

CSS:

#mainContainer { 
     position:relative; 
     width:100%; 
     height:100%; 
     clear:both; 
    } 
    .wrap{ 
     margin:0 auto; 
     position:relative; 
     max-width:900px; 
     overflow:visible; 
     clear:both; 
    } 
    #div1, #div2, #div3 { 
     float:left; 
     height:auto; 
     padding:5px 0 5px 0; 
     width:33.333%; 
     display:inline-block; 
     text-align: center; 
     cursor:pointer; 
    } 
    #div1:hover, #div2:hover, #div3:hover { 

    } 
    #div1{ 
     background:orange; 
    } 
    #div2{ 
     background:green; 
    } 
    #div3{ 
     background:blue; 
    } 

    .hiddenDiv1, .hiddenDiv2, .hiddenDiv3{ 
     display:none; 
     height:100px; 
     width:100%; 
     max-width:900px; 
     clear:both; 
     cursor:pointer; 
    } 
    .hiddenDiv1{ 
     background:orange; 
    } 
    .hiddenDiv2{ 
     background:green; 
    } 
    .hiddenDiv3{ 
     background:blue; 
    } 
    @media screen and (max-width: 500px){ 
     #div1, #div2, #div3 { 
      width: 100%; 
      display: block; 
     } 
     .hiddenDiv1, .hiddenDiv2, .hiddenDiv3 { 
      width:100%; 
     } 
    } 

PS: Я сделал много исследований на этом сайте, но это мой самый первый после.

Answer 1

Возможно, попробуйте добавить обработчик события изменения размера:

//initial call to function for if page loads under the width threshold 
move_elements(); 

$(window).resize(function() { 
    move_elements(); 
}); 

function move_elements() { 
    screenWidth = $(window).width(); 

    //using insertAfter instead so the div is not inside the menu div, causes issues with the click otherwise 
    if (screenWidth < 500) { 
     $('.hiddenDiv1').insertAfter($('#div1')); 
     $('.hiddenDiv2').insertAfter($('#div2')); 
     $('.hiddenDiv3').insertAfter($('#div3')); 
    } else { 
     $('.hiddenDiv1, .hiddenDiv2, .hiddenDiv3').insertAfter($('#div3')); //properly done for extended width, credits to ScoobSays 
    } 
} 

В действии: http://jsfiddle.net/k74gtcc1/1/

ScoobSays редактировать для 900px + ширина: jsfiddle.net/d47t70pm