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

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

javascript jquery css

Javascript 使用JQuery切换似乎会干扰flexbox的CSS媒体查询,javascript,jquery,css,flexbox,Javascript,Jquery,Css,Flexbox,我的页面使用CSS媒体查询来显示手机的可折叠垂直菜单和大型设备的标准水平菜单对于手机，折叠是由点击功能触发的，点击功能在菜单周围切换包装器这通常可以正常工作，但如果用户在切换菜单后调整浏览器窗口的大小，则媒体查询似乎无法正常工作，至少flexbox元素无法正常工作这是JQuery的一个限制吗？是否有解决方法提琴来了包含JScript和CSS的完整页面如下： <!doctype html> <html> <head> <meta charset=

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

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

这通常可以正常工作，但如果用户在切换菜单后调整浏览器窗口的大小，则媒体查询似乎无法正常工作，至少flexbox元素无法正常工作

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

提琴来了

包含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版本的问题。我正在使用Firefox v35和jQuery 1.9.1。

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

Css:

JavaScript:

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

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

演示：

JS:

CSS:

我不明白你的问题是什么？其次，你没有把jquery库包括在你的Fiddle中。太好了，非常感谢。也感谢用户1573618的确认。

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

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

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