使用JQuery切換似乎會干擾Flexbox的CSS媒體查詢
[英]Using JQuery toggle seems to interfere with CSS media queries for flexbox
問題描述
我的頁面使用CSS媒體查詢來顯示用於移動設備的可折疊垂直菜單和用於較大設備的標准水平菜單。
對於手機，折疊由點擊功能觸發，該功能可在菜單周圍切換包裝器。
這通常可以正常工作，但是如果用戶在切換菜單后調整瀏覽器窗口的大小，則媒體查詢似乎無法正常工作（至少對於flexbox元素而言）。
這是JQuery的限制嗎，有解決方法嗎？
小提琴在這里http://jsfiddle.net/nakbrooks/nyrzp4ps/1/
整頁（包括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
我建議您使用toggleClass而不是toggle這是因為css display屬性之間的切換開關與媒體查詢無關。 使用僅隱藏菜單的類將解決您的問題。
演示： 演示
JS：
$(document).ready(function () {
$("#toggle-menu").click(function () {
$("#hdr-menu-wrapper").toggleClass('hide');
});
});
CSS：
.hide {
display:none!important;
}
enter code here
解決方案2
3 2015-02-04 11:40:28
jQuery .toggle（）將css display屬性設置為block / none。 這將覆蓋您的display flex屬性。 為避免此問題，請創建一個CSS類，該類將隱藏您的元素並使用jQuery .toggleClass（）
CSS：
#hdr-menu-wrapper.hidden-menu-wrapper {
display:none;
}
JavaScript：
$("#hdr-menu-wrapper").toggleClass('hidden-menu-wrapper');
解決方案3
0 2015-02-04 11:40:27
您的小提琴對我來說很好用，所以我認為這是瀏覽器或jQuery版本的問題。 我正在使用Firefox（v35）和jQuery 1.9.1。
將jQuery .hide（）與CSS媒體查詢一起用於基於屏幕分辨率的菜單切換
[英]Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.