我的Jquery在加载时未能隐藏我的移动菜单。我之前使用过此代码并且工作正常 - 只是想知道我错过了什么。任何见解都会有所帮助。谢谢。
JQUERY
var screensize = document.documentElement.clientWidth;
$(document).ready(function(){
$(window).resize(function(){
if ( width == GetWidth() ) {
return;
}
width = GetWidth();
if( $(window).width() < 600) {
$('.link').hide();
} else {
$('.link').show();
}
});
$('header').on('click', function() {
$('.link').slideToggle(500);
e.preventDefault();
});
});
消息来源
<nav>
<ul id="mobile_active">
<li class="link"><a href="#">About Us</a></li>
<li class="link"><a href="#">Creative</a></li>
<li id="logo"><a href="#"><img src="#.png"/></a></li>
<li class="link"><a href="#">Portfolio</a></li>
<li class="link"><a href="#">Contact Us</a></li>
</ul>
</nav>
<header>
<a class="mobile_menu"></a>
</header>
CSS
@media (max-width: 600px) {
header {height:35px; top:185px; display:block;}
nav {position: relative; top: 113px;}
nav li a {width:100%; padding:0;}
nav ul li {width:100%; padding:0;}
nav ul li a {color: #949c50; font-size:1em; text-align:center;
border-bottom: 1px solid #bbb1a6; display:block; padding:3%; width:94%;}
nav ul li#logo a {border-bottom: none;}
nav li:first-child {padding-top:40px;}
nav ul li a:hover { color: #FFF;background-color:#949c50;}
nav ul li#logo a:hover {background-color:transparent;}
a.mobile_menu {
display:block;
width:100%; height:38px;
background:#a54499
url(../links/mobile_link_menu.png)no-repeat 4px 4px;
position:absolute;
top:165px;
cursor:pointer; }
a.mobile_menu.selected {background-position: 4px -26px; }
li#logo {
position: absolute;
top: 0;
left: 50%;
margin-top: -50px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}
答案 0 :(得分:0)
您是否尝试过使用CSS媒体查询而不是使用javascript?即默认情况下将链接的CSS显示设置为无,并在屏幕大小小于或等于600px时使用以下CSS显示。
.link {
display: none;
}
@media(max-width:600px){
.link {
display: visible;
}
}
我希望这会有所帮助。
答案 1 :(得分:0)
这是解决方案 - 虽然我仍然不完全理解为什么这段代码有效但我的仍然没有,因为我仍然在与Jquery斗争(如果有人想对此有所了解,那就不胜感激了。我在这里学习)。显然,我需要添加一个已定义的变量和console.log(width)。我在这个网站上找到了这个答案,并且要感谢用户mrtsherman。
$(window).resize(function () {
var width = $(window).width();
console.log(width);
if (width < 600) {
$('.link').hide();
} else {
$('.link').show();
}
});