JQuery未响应浏览器调整大小

Question

我有一个响应菜单，它根据浏览器的宽度从水平变为垂直。当单击类别时，两个版本的菜单都会显示隐藏的div。它们都能正常工作，但前提是调整浏览器大小，然后重新加载。如果不重新加载浏览器，就不会计算新窗口的大小，它会变成一团乱麻。

以下是我的JSFiddle，它展示了我的问题：http://jsfiddle.net/oxnerebo/

如果你的浏览器大于500px，菜单类别将是水平的，隐藏的div将在下面切换，跨越所有类别的宽度。

如果你的浏览器小于500px，菜单类别将堆叠在一起，隐藏的div将在选定的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%;
        }
    }

附言：我在这个网站上做了很多研究，但这是我的第一篇帖子。

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/

900px+width的ScoobDays编辑：jsfidde.net/d47t70pm