Question

我的页面使用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>

Answer 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

Answer 2

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

的css类

的CSS：

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

JavaScript的：

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

Answer 3

你的小提琴适合我，所以我认为这是浏览器或jQuery版本问题。我正在使用Firefox（v35）和jQuery 1.9.1。

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

3 个答案: