Jquery 消失导航
我正在尝试创建一个相当简单的响应式下拉菜单。在Chrome和Firefox中看起来都不错，但在IE（10及以下）中，菜单在某一点上消失了 我不能完全理解这一点，我相信这与调整窗口大小时的jQuery有关 我已经创建了一个JSFIDLE，但无法测试它，因为我的IE10正在崩溃 这是我的密码： HTML JS:Jquery 消失导航,jquery,html,css,internet-explorer,responsive-design,Jquery,Html,Css,Internet Explorer,Responsive Design,我正在尝试创建一个相当简单的响应式下拉菜单。在Chrome和Firefox中看起来都不错，但在IE（10及以下）中，菜单在某一点上消失了 我不能完全理解这一点，我相信这与调整窗口大小时的jQuery有关 我已经创建了一个JSFIDLE，但无法测试它，因为我的IE10正在崩溃 这是我的密码： HTML JS: $（文档）.ready（函数（e）{ $（文档）。单击（函数（e）{ 如果（！jQuery.browser.mobile&&$（window）.width（）
$（文档）.ready（函数（e）{
$（文档）。单击（函数（e）{
如果（！jQuery.browser.mobile&&$（window）.width（）<870）{
if（例如target.className！=“菜单主导航容器”）{
如果（$（“#菜单主导航”）为（“：可见”））{
如果（如：target.className！=“菜单”）{
$（“#菜单主导航”）.hide（）；
}
}
}
}
});
$（'.menu主导航容器'）。单击（函数（）{
如果（$（窗口）.width（）<870）{
$this=$（this）；
如果（$（“#菜单主导航”）为（“：可见”））{
$this.children（'ul'）.hide（）；
}否则{
$this.children（'ul'）.show（）；
}
}
});
$（窗口）。调整大小（函数（）{
如果（！jQuery.browser.mobile）{
如果（$（窗口）.width（）>870）{
$（“#菜单主导航”）.show（）；
}否则{
$（“#菜单主导航”）.hide（）；
}
}
});
});
提前感谢您的帮助。现在就解决了这个问题-简单的解决方案是在我的jQuery代码中将$（window）.width（）更改为$（document）.width（）。尝试创建一个jsfiddle.net工具，或者至少创建一个指向有问题站点的链接Try
overflow:auto用于标题
和导航
<header>
<nav> <div class="menu-primary-navigation-container"><ul id="menu-primary-navigation" class="menu" style="display: block;"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://kodeable.com/wp/">Home</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href="http://kodeable.com/wp/category/tutorials/">Tutorials</a>
<ul class="sub-menu">
<li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="http://kodeable.com/wp/category/tutorials/css3/">CSS3</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="http://kodeable.com/wp/category/tutorials/html5/">HTML5</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="http://kodeable.com/wp/category/tutorials/jquery/">jQuery</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="http://kodeable.com/wp/category/tutorials/php/">PHP</a></li></ul></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://kodeable.com/wp/contribute/">Contribute</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://kodeable.com/wp/about/">About</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://kodeable.com/wp/contact/">Contact</a></li></ul></div><ul id="user-info"><li>Hey, Name</li>
<li> <img alt="Avatar" src="http://1.gravatar.com/avatar/90391e1d82af6445f9af05ba5495da59?s=48&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"> </li>
<li>
<a href="http://kodeable.com/wp/wp-login.php?action=logout&redirect_to=http%3A%2F%2Fkodeable.com%2Fwp%2Fhtml-and-css-for-beginners-part-i%2F&_wpnonce=e198305054" title="Logout" id="logout">Logout</a>
</li>
</ul>
</nav>
<a href="http://www.kodeable.com"><img src="/wp/wp-content/themes/kodeable/images/logo.png" alt="Kodeable Logo" class="logo" height="55" width="312"></a>
</header>
/** ==============================================================
* Navigation
* ================================================================*/
header nav {
background: #fff;
border-bottom: 2px solid #3ea49b;
height: 50px;
overflow: visible;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0 0 0 24px;
position: relative;
z-index: 9999;
}
nav ul:after {
clear: both;
content: "";
display: block;
}
header nav ul li {
background: #fff;
float: left;
height: 48px;
}
nav ul li:hover > ul {
display: block;
}
header nav ul li a:hover,
header nav ul li.current-menu-item a,
header nav ul li.current-menu-parent,
header nav ul li.current-menu-parent a {
background-color: #ef6f68;
color: #fff;
}
header nav ul li.current-menu-parent ul li a {
background-color: #fff;
color: #959595;
}
header nav ul li.current-menu-parent ul li.current-menu-item a {
background-color: #ef6f68;
color: #fff;
}
header nav ul li a:hover,
header nav ul li.current-menu-item ul a:hover,
header nav ul li.current-menu-parent a:hover,
header nav ul li.current-menu-parent ul li.current-menu-item a:hover {
background-color: #ef6f68;
color: #fff;
}
header nav ul li a {
color: #959595;
display: block;
padding: 14px 13px;
}
header nav ul li a:first-child {
margin-left: 0;
}
header nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
header nav ul li.current-menu-item ul a {
background: #fff;
}
nav ul ul ul {
left: 100%;
position: absolute;
top:0;
}
ul.sub-menu {
border: 2px solid #3ea49b;
border-top: none;
min-width: 100px;
padding: 0;
}
.menu-primary-navigation-container {
float: left;
}
#user-info {
float: right;
}
#user-info li {
float: left;
}
#user-info li:first-child {
padding: 14px 13px;
}
#logout {
background-color: #ef6f68;
color: #fff;
float: right;
padding: 14px 13px;
margin-right: 24px;
}
@media only screen and (max-width: 870px) {
.menu-primary-navigation-container {
background: url(images/menu-icon.png) 2px 2px no-repeat;
cursor: pointer;
height: 48px;
margin-left: 24px;
width: 48px;
}
.menu-primary-navigation-container ul {
display: none;
margin-top: 48px;
margin-left: 10px;
padding: 0;
}
.menu-primary-navigation-container ul li {
height: auto;
}
.menu-primary-navigation-container ul li a {
background: #eee;
clear: both;
min-width: 200px;
}
.menu-primary-navigation-container ul li ul {
border: none;
display: block;
float: left;
margin: 0;
padding: 0;
position: static;
}
.menu-primary-navigation-container ul li ul li:first-child {
border-top: 2px solid #76c2bb;
}
.menu-primary-navigation-container ul li ul li a {
background: #fff;
padding-left: 24px;
}
.menu-primary-navigation-container ul li ul li a:hover {
background: #ef6f68;
}
}
@media only screen and (max-width: 470px) {
ul#user-info li:first-child {
display: none;
}
}
$(document).ready(function(e) {
$(document).click(function(e) {
if(!jQuery.browser.mobile && $(window).width() < 870) {
if(e.target.className !== "menu-primary-navigation-container") {
if($('#menu-primary-navigation').is(":visible")) {
if(e.target.className !== "menu") {
$("#menu-primary-navigation").hide();
}
}
}
}
});
$('.menu-primary-navigation-container').click(function() {
if($(window).width() < 870) {
$this = $(this);
if($('#menu-primary-navigation').is(":visible")) {
$this.children('ul').hide();
} else {
$this.children('ul').show();
}
}
});
$(window).resize(function() {
if(!jQuery.browser.mobile) {
if($(window).width() > 870){
$('#menu-primary-navigation').show();
} else {
$('#menu-primary-navigation').hide();
}
}
});
});