javascript - 是否有可能css显示:block after jquery display:none?

Question

这是在 jsFiddle https://jsfiddle.net/6vzkr4wt/15/

如果不使用 jquery，一切正常。使浏览器屏幕至少 737px可以看到<div id="menu">Menu Menu Menu</div> .如果更改浏览器屏幕小于 737px , 那么就看不到 <div id="menu">Menu Menu Menu</div> .

但问题出在以下操作之后:

1) 使浏览器屏幕小于737px

2) 点击<div id="show_menu">Show menu</div> , 请参阅 <div id="menu">Menu Menu Menu</div>

3) 点击外部<div id="menu">Menu Menu Menu</div>和 <div id="menu">Menu Menu Menu</div>消失。到目前为止没问题。

4) 问题来了。使浏览器屏幕至少 737px并且没有看到 <div id="menu">Menu Menu Menu</div>

据我所知，jquery 代码的执行阻止了它。请问有什么办法？仅使用 jquery 检测浏览器宽度并显示/隐藏 id="menu" ？用 CSS 不行吗？

下面是代码

$(document).mouseup(function(e) {
  if (!$('#menu').is(e.target) && $('#menu').has(e.target).length === 0) {
    $("#menu").css("display", "none");
  }
});
$("#show_menu").click(function() {
  $("#menu").css("display", "block");
});

@media screen and (max-width: 736px) {
  #menu {
    display: none;
  }
  #show_menu {
    display: block;
  }
}

@media screen and (min-width: 737px) {
  #menu {
    display: block;
  }
  #show_menu {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show_menu">Show menu</div>
<div id="menu">Menu Menu Menu</div>

感谢您的建议。这里https://jsfiddle.net/6vzkr4wt/27/正在根据需要工作。将尝试仅使用 css 实现相同的功能。

这里https://jsfiddle.net/rauw6zyk/8/示例如何仅使用 css(必须使用 tabindex="1" 。可能有人知道更好的解决方案。

<span class="span3" tabindex="1">Hide Me</span>
<span class="span2" tabindex="1">Show Me</span>
<p class="alert" >Some alarming information here</p>


body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

Answer 1

您可以使用 $(window).width(), $(window).height() 来查找窗口的宽度和高度，并在 $("#menu").css("display", " block ");

$("#show_menu").click(function(){
  var w=$(window).width();
  if(w<=736){//Less then & equals to 736px 
   // don't do anything
  }
  else{//More then 736px
    $("#menu").css("display", "block");
  }
});