使用 JQuery 切换似乎会干扰 CSS flexbox 的媒体查询

Question

我的页面使用 CSS 媒体查询来显示移动设备的可折叠垂直菜单和较大设备的标准水平菜单。

对于手机，折叠是由点击功能触发的，该功能切换菜单周围的包装。

这在正常情况下工作正常，但如果用户在切换菜单后调整浏览器的大小 window，媒体查询似乎无法正常工作（至少对于 flexbox 元素而言）。

这是 JQuery 的限制吗？有解决方法吗？

Fiddle 在这里 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>

Answer 1

你的 fiddle 对我来说工作正常，所以我认为它要么是浏览器问题，要么是 jQuery 版本问题。我正在使用 Firefox (v35) 和 jQuery 1.9.1.

Answer 2

jQuery.toggle() 将 css 显示属性设置为 block/none。这将覆盖您的 display flex 属性。为避免此问题，请创建一个 css class 来隐藏您的元素并使用 jQuery .toggleClass()

Css:

#hdr-menu-wrapper.hidden-menu-wrapper {
    display:none;
}

JavaScript:

$("#hdr-menu-wrapper").toggleClass('hidden-menu-wrapper');

Answer 3

我建议您使用 toggleClass 而不是 toggle，因为无论媒体查询如何，都可以在 css display 属性之间切换。使用仅隐藏菜单的 class 将解决您的问题。

演示：Demo

JS:

$(document).ready(function () {
    $("#toggle-menu").click(function () {
        $("#hdr-menu-wrapper").toggleClass('hide');
    });
});

CSS:

.hide {
    display:none!important;
}
enter code here

使用 JQuery 切换似乎会干扰 CSS flexbox 的媒体查询

Using JQuery toggle seems to interfere with CSS media queries for flexbox

javascript

css

jquery

flexbox