Javascript 调整父div大小时的垂直到水平菜单

我会是一个简单的css效果或js，但我还没有找到解决方案

我的目标是在一个div内创建一个菜单，当我调整浏览器窗口或父div的大小时，该菜单集本身隐藏，我需要将另一个div设置为可见，该div在水平方向上包含相同的菜单

<div id="when_size_if_of_100px_visible_if_not_hidden">[menu item1 item2 item 3 item4]</div>

<div id="when_size_sup_of_100px_visible_if_not_hidden">
 menu  
 item1
 item2
 item3
</div>

[菜单项1项2项3项4]
菜单
项目1
项目2
项目3

---

我希望澄清。感谢您的回复。

您可以根据浏览器窗口大小编写不同的CSS。

您可以使用

调整大小

：

$(window).resize(function(){
  if (window.innerWidth < 100){
    $("#when_size_if_of_100px_visible_if_not_hidden").hide();
    $("#when_size_sup_of_100px_visible_if_not_hidden").show();
  } else {
    $("#when_size_if_of_100px_visible_if_not_hidden").show();
    $("#when_size_sup_of_100px_visible_if_not_hidden").hide();
  }
});

$（窗口）。调整大小（函数（）{
如果（窗内宽度<100）{
$（“#when_size_if_of_100px_visible_if_not_hidden”）.hide（）；
$（“#当_大小_sup_的_100px_可见_如果_未_隐藏”）.show（）；
}否则{
$（“#当_size_if_of_100px_visible_if_not_hidden”）.show（）；
$（“#当_大小_sup_的_100px_可见_如果_未_隐藏”）.hide（）；
}
});

正如newtron所说，您应该使用媒体查询来完成此操作。您只有一个内容，但它将根据窗口大小以不同的方式显示。下面是一个工作示例

使用的HTML代码是

<ul>
    <li>menu A</li>
    <li>menu B</li>
    <li>menu C</li>
    <li>menu D</li>
</ul>

<div>
    Window width is lower than 500px !
</div>

还要注意，IE上不支持媒体查询。为此，您可以使用Respond.js Javascript库

li {
    border: solid black 1px;
    width: 100px;
    display: inline-block;
}

div {
    display: none;
}


@media (max-width:500px) {
    li {
        display: block;
    }
    div {
        display: block;
    }
}​