0

我正在创建一个 CSS 响应式网站。

如何以移动屏幕分辨率隐藏下拉菜单？并在更大的分辨率下再次出现？（我是 jQuery 新手）

这是我的html：

<div id="menuContainer">

  <ul id="menu">

     <li id="about">

     <a href="about.html">About</a>

          <ul class="dropdown">

             <li>
               <a href="#">Link 1</a>
             </li>

             <li>
               <a href="#">Link 2</a>
             </li>

             <li>
               <a href="#">Link 3</a>
             </li>

          </ul>

      </li>

  </ul>

</div>

还有我的 jQuery：

$('#menu li ul').css({
    display: "none",
  });
      $('#menu li').hover(function() {
        $(this)
          .find('ul')
          .stop(true, true)
          .slideDown('fast');
      }, function() {
        $(this)
          .find('ul')
          .stop(true,true)
          .fadeOut('fast');
      });
4

3 回答 3

0

尝试在 CSS 中使用媒体查询

@media only screen and (max-device-width: 480px) {
    .dropdown {  display: none; }

}

这意味着它仅在屏幕尺寸小于 480 像素时将 display: none 应用于该类

阅读这篇文章以了解更多信息 - http://css-tricks.com/css-media-queries/ - 这些是使网站响应式的核心。

于 2013-03-21T21:41:39.817 回答
0

为什么不使用媒体查询

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
/* Do whatever you want for this resolution */
}

正如你上面的评论
你可以试试这个

$(window).resize(function() {
  var windowWidth = $(window).width(); //retrieve current window width
  var windowHeight = $(window).height(); //retrieve current window height

  // show/hide dropdown based on height/width values
});
于 2013-03-21T21:41:43.007 回答
0

这可能不是您想要的，但我用于动态页面大小的是Twitter 的 Bootstrap 库。

这是一个免费使用的 API。

否则，我没有技术知识来帮助您实现 JQuery。

于 2013-03-21T21:42:36.190 回答