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

【问题标题】：Using JQuery toggle seems to interfere with CSS media queries for flexbox使用 JQuery 切换似乎会干扰 flexbox 的 CSS 媒体查询
【发布时间】：2015-02-04 19:40:50
【问题描述】：

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

对于移动设备，折叠由 Click 函数触发，该函数在菜单周围切换包装器。

这正常工作，但如果用户在切换菜单后调整浏览器窗口的大小，媒体查询似乎不能正常工作（至少对于 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>

【问题讨论】：

我没有得到你的问题？其次你没有在你的小提琴中包含 jquery 库

标签： javascript jquery css flexbox

【解决方案1】：

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

演示：Demo

JS：

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

CSS：

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

【讨论】：

太好了，非常感谢。也感谢 user1573618 的确认。

【解决方案2】：

jQuery .toggle() 将 css 显示属性设置为 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】：

你的小提琴对我来说很好，所以我认为这是浏览器或 jQuery 版本的问题。我正在使用 Firefox (v35) 和 jQuery 1.9.1。

【讨论】：