这是在 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;}
最佳答案
您可以使用 $(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");
}
});
关于javascript - 是否有可能css显示:block after jquery display:none?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51532411/