编辑：

Question

这是我的html，当屏幕宽度超过pointing menu时，我有一个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;  
    }
}

当我将屏幕大小调整为630px或更低时，水平导航栏菜单消失，页面中央会出现一个按钮。屏幕截图的链接为here

我打开侧边栏并将屏幕调整为大于630px的宽度，删除侧边栏中的菜单项但不删除侧边栏本身。有截屏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>

以下是jsfiddle和runnable

Answer 1

感谢您更新了Fiddle示例，问题似乎是CSS和jQuery之间的视觉更改之间存在冲突。此外，一旦屏幕尺寸变回桌面，就没有任何代码可以强制移动菜单隐藏。

我提出的解决方案是首先调整CSS以满足每个media query的主要视觉变化，然后使用检查屏幕宽度更改的侦听器对jQuery更改执行相同操作。

以下是 Fiddle 的实际操作

<强> CSS

如果关闭脚本，您的CSS应该始终处理您想要实现的基础知识。否则，页面可能会中断。这也有很少的页面加载的好处（当CSS可以处理它时从不使用JS）。

如果您使用媒体查询进行更改，则需要明确说明任何移动/非移动元素会发生什么。鉴于我们正在谈论具有状态的事物：showing/hidden，您必须指定这些状态涉及的内容：

适用于您的移动设备：

@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;
   }    
}

或者，您可以完全删除桌面样式周围的媒体查询，因为无论一旦超过630px，都将应用(max-width: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”代码段非常有用，其行为方式与media queries相同。

Answer 2

我找到了使用enquirejs的问题的解决方案，该解决方案可用于侦听匹配和不匹配的媒体查询。

  <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script>

  var query='all and (min-width : 631px)';
  enquire.register(query,function(){
   $('#m_menu').sidebar('hide');
  });

这是一个fiddle，这是一个runnable。

Semantic-UI从移动设备到平板电脑的转换，侧边栏打开

编辑：

2 个答案: