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（）通过jquery查找窗口的宽度和高度，并在$（“＃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");
  }
});

jQuery display：none之后是否可能使用CSS display：block？

1 个答案: