使用JQuery切换似乎会干扰Flexbox的CSS媒体查询
[英]Using JQuery toggle seems to interfere with CSS media queries for flexbox
问题描述
My page uses CSS media queries to display collapsible vertical menus for mobiles and standard horizontal menus for larger devices. 
我的页面使用CSS媒体查询来显示用于移动设备的可折叠垂直菜单和用于较大设备的标准水平菜单。
For mobiles, the collapse is triggered by a Click function which toggles the wrapper around the menus. 对于手机，折叠由点击功能触发，该功能可在菜单周围切换包装器。
This works fine normally, but if the user resizes the browser window after having toggled the menus the media queries don't seem to work properly (at least not for the flexbox elements). 这通常可以正常工作，但是如果用户在切换菜单后调整浏览器窗口的大小，则媒体查询似乎无法正常工作（至少对于flexbox元素而言）。
Is this a limitation of JQuery and is there a workaround? 这是JQuery的限制吗，有解决方法吗？
Fiddle is here http://jsfiddle.net/nakbrooks/nyrzp4ps/1/ 小提琴在这里http://jsfiddle.net/nakbrooks/nyrzp4ps/1/
Full page (including JScript and CSS is here: 整页（包括JScript和CSS在这里：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Load jquery library -->
</head>
<body>
<script>
/* Toggle the menus (for small screen devices) */
$(document).ready(function(){
$("#toggle-menu").click(function(){
$("#hdr-menu-wrapper").toggle();
});
});
</script>
<style> /* Obviously styles would normally be in a separate style sheet */
/* Default Layout - all resolutions */
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p { /* Just to make explanation of problem more readable */
padding: 8px;
}
#toggle-menu {
display: block;
background-color: #404040;
color: #FF0000;
}
#hdr-menu-wrapper {
background-color: #484848;
}
#main-menu, #lang-menu {
list-style-type: none;
}
#main-menu li, #lang-menu li {
padding: 3px 8px;
text-align: center;
color: #FFFFFF;
}
#main-menu li a {
text-decoration: none;
color: #FFFFFF;
}
/* Small Screens Layout (639px and below) only. Inherits styles from Default Layout. */
@media only screen and (max-width: 639px) {
#hdr-menu-wrapper {
display: block;
position: relative;
}
#main-menu {
display: block;
position: relative;
width: 100%;
background-color: #8080FF;
}
#main-menu li { /* Display menu items in column on small windows */
display: block;
}
#lang-menu { /* Use flexbox to keep all lang options centered on same line */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
position: relative;
width: 100%;
background-color: #FF8080;
}
#lang-menu li { /* Keep inline within lang-menu flexbox */
position: relative;
display: inline-block;
}
}
/* All larger screens (shows full headers). Inherits styles from: Default Layout & Small Screens Layout. */
@media only screen and (min-width: 640px) {
#hdr-menu-wrapper { /* Display main and languasge menus on same line aligned left and right respectivel;y */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: space-between;
-moz-box-pack: space-between;
-ms-flex-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 8px;
}
#main-menu, #lang-menu {
display: block;
width: auto;
background-color: none;
}
#main-menu li, #lang-menu li { /* Display menu items in row on larger windows, with padding between */
position: relative;
display: inline-block;
}
}
</style>
<p id="toggle-menu">Toggle Menus</p>
<div id="hdr-menu-wrapper">
<ul id="main-menu">
<li id="mnu-1"><a href="/page1.php">Menu 1</a></li>
<li id="mnu-2"><a href="/page2.php">Menu 2</a></li>
<li id="mnu-3"><a href="/page3.php">Menu 3</a></li>
<li id="mnu-4"><a href="/page4.php">Menu 4</a></li>
</ul>
<ul id="lang-menu"> <!-- Code to switch languages excluded from this demo -->
<li id="langEN">English</li>
<li id="langFR">Francais</li>
</ul>
</div>
<br>
<p>On small window widths the Menu items should appear below each other with the Language items in a row below that - all centered.</p>
<p>On larger window widths the Menu items should appear side by side on the left and the Language items side by side on the right, all on the same line.</p>
<p>Clicking 'Toggle Menus' hides both the Menu and Language options. Clicking again restores them.</p>
<p>PROBLEM:</p>
<p>If, after clicking 'Toggle Menus' to hide the items, the window is resized from big to small or vice-versa and 'Toggle Menus' is then clicked again to restore the items the display styling (block or flex) appropriate to the new window size is not applied. The JQuery script used to toggle the menu items seems to interfere with the application of the CSS media query styling (at least so far as flexbox is concerned).</p>
</body>
</html>
3 个解决方案
解决方案1
8 已采纳 2015-02-04 11:40:50
I would suggest you to use toggleClass instead of toggle because toggle switch between the css display properties irrespective of the media query. 我建议您使用toggleClass而不是toggle这是因为css display属性之间的切换开关与媒体查询无关。 Using a class which just hides the menu will solve your issue. 使用仅隐藏菜单的类将解决您的问题。
JS: JS：
$(document).ready(function () {
$("#toggle-menu").click(function () {
$("#hdr-menu-wrapper").toggleClass('hide');
});
});
CSS: CSS：
.hide {
display:none!important;
}
enter code here
解决方案2
3 2015-02-04 11:40:28
jQuery .toggle() sets the css display property to block/none. jQuery .toggle（）将css display属性设置为block / none。 This will overwrite your display flex property. 这将覆盖您的display flex属性。 To avoid this issue, create a css class that will hide your element and use jQuery .toggleClass() 为避免此问题，请创建一个CSS类，该类将隐藏您的元素并使用jQuery .toggleClass（）
Css: CSS：
#hdr-menu-wrapper.hidden-menu-wrapper {
display:none;
}
JavaScript: JavaScript：
$("#hdr-menu-wrapper").toggleClass('hidden-menu-wrapper');
解决方案3
0 2015-02-04 11:40:27
Your fiddle works fine for me, so I think it's either a browser or jQuery version problem. 您的小提琴对我来说很好用，所以我认为这是浏览器或jQuery版本的问题。 I'm using Firefox (v35) and jQuery 1.9.1. 我正在使用Firefox（v35）和jQuery 1.9.1。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.