0

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

我的目标是在 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>

我希望清楚。感谢您的所有回复。

4

3 回答 3

1

您可以使用媒体查询根据浏览器窗口大小编写不同的 CSS。

于 2012-04-21T14:04:51.527 回答
1

正如 newtron 所说，您应该使用媒体查询来执行此操作。您只有一个内容，但它会根据窗口大小以不同的方式显示。这是一个工作示例http://jsfiddle.net/pomeh/Gdve3/

使用的 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>

和CSS代码

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

div {
    display: none;
}


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

另请注意，IE 不支持媒体查询。为此，您可以使用 Respond.js Javascript 库https://github.com/scottjehl/Respond

于 2012-04-21T14:22:28.577 回答
0

你可以使用resize：

$(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();
  }
});
于 2012-04-21T14:05:02.153 回答