Question

我有一个响应式菜单，根据浏览器的宽度从水平变为垂直。菜单的两个版本都会在单击类别时显示隐藏的div。它们都正常工作，但只有在调整浏览器大小然后重新加载时才能正常工作。如果没有重新加载浏览器，则不会计算新的窗口大小，并且会变成丑陋的混乱。

这是我的JSFiddle，它演示了我的问题：http://jsfiddle.net/oxnerebo/

如果您的浏览器大于500像素，则菜单类别将为水平，隐藏的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%;
        }
    }

PS：我在这个网站上做了很多研究，但这是我的第一篇文章。

Answer 1

也许尝试为resize事件添加处理程序：

//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

JQuery没有响应浏览器调整大小

1 个答案: