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

Question

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

nak*_*akb 0 javascript css jquery flexbox

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

K K*_*K K 8

我建议您使用toggleClass而不是toggle因为切换在css display属性之间切换,而不管媒体查询.使用只隐藏菜单的类将解决您的问题.

演示:演示

JS:

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

Run Code Online (Sandbox Code Playgroud)

CSS:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，9 月前
查看次数：	5798 次
最近记录：	10 年，9 月前