这是我的 html，当屏幕宽度超过 630px 时，我有一个指向菜单，当屏幕宽度小于 时，我有一个带有菜单按钮的边栏>630px:
<nav class="ui inverted sidebar menu vertical slide out" id="m_menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
</nav>
<div id="menuDiv">
<nav class="ui inverted fluid four item pointing menu" id="menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
<a href="contact.php" class="item">
<i class="message icon"></i> Contact
</a>
</nav>
<div class="ui labeled icon button black" id="m_btn">
<i class="icon list layout"></i> Menu
</div>
</div>
<img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs">
这是我的CSS:
body{
margin:0;
padding:0;
font-family:"helvetica",arial;
}
#menuDiv{
margin:40px 40px 0 40px;
text-align:center;
}
#menu:{
max-width:1024px;
margin:0 auto;
}
#m_btn{display:none;}
img{
width:100%;
height:auto;
position:absolute;
top:0;
z-index:-1;
}
@media all and (max-width:630px)
{
#menu{display:none;}
#m_btn{
display:inline-block;
}
}
/*fails to fix sidebar sidebar showing @width>=631px*/
@media all and (min-width:631px)
{
/*suggested on tutsplus,no change on applying*/
body.pushable{margin-left:0 !important;}
#m_menu.visible{
display:none;
}
}
当我将屏幕大小调整为 630 像素或更低时，水平导航栏菜单消失，页面中央出现一个按钮。屏幕截图的链接是 here
我打开侧边栏并将屏幕的大小调整为大于 630 像素的宽度，它会删除侧边栏中的菜单项而不是侧边栏本身。有一个屏幕截图 here
即使以超过 630px 的分辨率打开，如何确保侧边栏消失？
编辑:
当侧边栏打开时，语义 ui 将所有其他内容包装到 pusher 类中，并将 pushable 类添加到 body 中，它使用类visible 为您提供侧边栏正在做什么的信息，这就是尝试的原因
@media all and (min-width:631px)
{
/*suggested on tutsplus,no change on applying*/
body.pushable{margin-left:0 !important;}
#m_menu.visible{
display:none;
}
}
这是侧边栏可见的 DOM 的样子:
<body class="pushable">
<nav class="ui inverted sidebar menu vertical slide out uncover left animating visible" id="m_menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
</nav>
<div class="pusher dimmed"><div id="menuDiv">
<nav class="ui inverted fluid four item pointing menu" id="menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
<a href="contact.php" class="item">
<i class="message icon"></i> Contact
</a>
</nav>
<div class="ui labeled icon button black" id="m_btn">
<i class="icon list layout"></i> Menu
</div>
</div><img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs"></div>
</body>
最佳答案
感谢您更新 Fiddle 示例，问题似乎是 CSS 和 jQuery 所做的视觉更改之间存在冲突。此外，在屏幕尺寸变回桌面后，任何地方都没有强制隐藏移动菜单的代码。
我想到的解决方案是首先调整 CSS 以满足每个 media query 的主要视觉变化，然后使用检查更改的监听器对 jQuery 更改执行相同的操作屏幕宽度。
这是一个 Fiddle 在行动中
CSS
如果脚本被关闭，您的 CSS 应始终处理您想要实现的目标的基础知识。否则，页面可能会中断。这也有减少页面加载的巨大好处(当 CSS 可以处理它时，不要使用 JS)。
如果您使用媒体查询更改任何移动/非移动元素，您需要明确说明应该发生什么。鉴于我们正在谈论具有状态的事物:显示/隐藏，您必须指定这些状态涉及的内容:
针对您的移动布局:
@media all and (max-width:630px) {
/* First, hide the main menu */
#menu {
display:none;
}
/* then display the mobile menu */
#m_menu {
display:block;
}
/* lastly, show your mobile menu button */
#m_btn{
display:inline-block;
}
}
桌面布局
基本上撤消您为移动版本所做的一切:
@media all and (min-width:631px) {
/* Hide the mobile menu */
#m_menu {
display:none;
}
/* Unhide the regular menu */
#menu{
display:block;
}
/* Lastly, hide the mobile menu button */
#m_btn{
display:none;
}
}
或者，您可以完全删除围绕桌面样式的媒体查询，因为在 (max-width:630px) 之外指定的任何样式都将被应用，而不管超过 630px。
jQuery
然后您可以应用监听器来检查宽度何时更改超过您选择的断点。获取准确的宽度很棘手，因为“630”触发得太宽，所以我选择了 617，因为它与最接近的 media query 断点匹配。
请注意，这仅适用于调整屏幕大小，即用户拖动浏览器大小或将设备方向从portrait更改为landscape反之亦然。
在 if 语句中，只有当屏幕调整到桌面大小时才会触发，然后我们可以强行隐藏 #m_menu。
$(window).resize(function() {
// Detect if the resized screen is mobile or desktop width
if($(window).width() > 617) {
console.log('desktop');
$('#m_menu').sidebar('hide');
}
else {
console.log('mobile');
}
});
这最后一部分可能有更好的方法，因为 .resize() 可能每秒触发多次，并且会显着减慢页面速度。
根据我构建响应式网站的经验，专门针对此类场景设置“条件 javascript”片段非常有用，其行为方式与媒体查询相同。
关于jquery - Semantic-UI 在侧边栏打开的情况下从移动设备过渡到平板电脑显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27476008/