Question

我有一个移动菜单按钮，显示宽度低于768像素，单击时会显示菜单，再次单击时会隐藏菜单。但是，一旦菜单被jquery隐藏，如果浏览器宽度增加（例如在桌面上）超过768px，我怎么能再次显示它。我必须使用jQuery检查屏幕宽度并显示在768px以上或css会这样做吗？

metroLabel8.Text = diff1.ToString(@"dd\.hh\:mm\:ss");

CSS：

$(document).ready(function(){
    var h = $("#hamburger");
    h.addClass('fa fa-toggle-down');
    h.on('click', function(){
      if (h.hasClass('fa-toggle-down')) {
        h
        .removeClass('fa-toggle-down')
        .addClass('fa-toggle-up');
        $("#main-menu .module-menu").show();
      } else {
        h
        .removeClass('fa-toggle-up')
        .addClass('fa-toggle-down');
        $("#main-menu .module-menu").hide();
      }
    });
});

HTML：

#hamburger {
  font-size: 20px;
  border: 1px solid #eee;
  background: #f5f5f5;
  color: black;
  padding: 3px 3px;
  border-radius: 3px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 30px;
  margin: 14px 3px 3px 3px;
  float:left;
  display:none;
}   
@media (max-width:768px){
  #hamburger {display:block}
  #main-menu .module-menu {display:none}
}

Answer 1

您可以使用班次切换，而不是show()和hide()方法。所以在拥有这个课程之间切换。然后你可以选择隐藏某些分辨率的这个类。这样您就可以避免使用jQuery检查屏幕宽度，并且可以依赖于css media查询。这是一个例子： https://jsfiddle.net/43oays2c/

移动菜单按钮和主菜单显示与jquery和CSS

1 个答案: