这是我之前发布的一个问题，但还没有解决，我觉得我需要更清楚。
我有一个基本的响应导航栏，在执行以下过程后不会重新显示主导航。
1） 缩小导航并打开响应导航
2） 使用按钮关闭响应导航。
3） 完全重新打开浏览器。
4） 原始导航链接仍然隐藏！除非你刷新屏幕，否则我无法让它们重新显示。
这是我的小提琴。
如果你能帮忙，请更新小提琴。
谢谢http://jsfiddle.net/d6Cc8/3/
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: url(../img/assets/body-bg.gif) repeat;
}
#wrap{
margin: 0 auto;
text-align: center;
}
#wrap-inner{
padding: 20px;
padding-top:80px;
}
#wrap-inner-profile{
padding: 10px 20px 20px 20px;
}
#content{
position: relative;
max-width: 970px;
margin: 0 auto;
padding: 0;
font-size: 1.2em;
background: url(../img/assets/body-bg.gif) repeat;
}
#content .center{
text-align: center;
margin: 0 auto;
}
.general-container{
max-width: 970px;
margin: 0 auto;
font-size: 12px;
padding: 20px;
}
li{
list-style: none;
}
a:link, a:visited{
color: #4083a9;
outline: none;
text-decoration: none;
font-size: 13px;
}
a:hover{
text-decoration: none;
color: #205f82;
}
ul, ol, h1, h2, h3, h4, p{
padding: 0px;
margin: 0px;;
}
p{
line-height: 22px;
font-size: 13px;
}
.clearfix{
clear: both;
}
img:hover{
opacity: .7;
}
#header{
width: 100%;
height: 53px;
background: #333;
background: rgba(47,47,47,0.98);
z-index: 9999;
position: fixed;
top: 0px;
}
#header-inner{
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#header-icons{
position: absolute;
top: 18px;
right: 95px;
}
#logo{
float: left;
padding: 0px 20px 0 0;
}
#logo a{
display: block;
width: 107px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img{
height: 0;
}
#logo a:hover{
opacity: .6;
}
#upload-btn{
background: #86c343;
margin-top: 12px;
padding: 7px 12px 8px 12px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-left: 20px;
margin-right: 30px;
}
#upload-btn a{
color: white;
font-weight: bold;
font-size: 11px;
}
#upload-btn:hover{
background: #79b33a;
}
#upload-green-btn{
display: block;
}
#upload-responsive{
display: none !important;
}
.main-btn{
display: block;
text-align: center;
font: normal 1.6em "Helvetica Neue", helvetica, sans-serif;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: none !important;
padding: 10px 20px;
color: #fff !important;
cursor: pointer;
font-size: 16px;
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #bdbdbd;
}
.main-btn:hover{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #a1a1a1;
}
a.main-btn{
color: white;
}
input.main-btn{
display: block;
font: normal 1.6em "Helvetica Neue", helvetica, sans-serif;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: none !important;
padding: 10px 20px;
color: #fff !important;
cursor: pointer;
font-size: 16px;
}
input.main-btn:hover{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #a1a1a1;
}
.main-btn.orange{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #ff6a00;
display: block;
text-align: center;
}
.main-btn.orange:hover{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #ff8025;
}
.main-btn.green{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #4eaa32;
display: block;
text-align: center;
}
.main-btn.green:hover{
background: url('../img/assets/btn-mist.png') repeat-x 0 50% #4eaa32;
}
.signinfacebook{
background: url('../img/assets/facebook-signin.png') no-repeat 19px 11px, url('../img/assets/btn-mist.png') repeat-x 0 50% #2e56aa;
padding: 13px 51px !important;
margin: 0 auto;
font-weight: bold;
}
.signinfacebook:hover{
background: url('../img/assets/facebook-signin.png') no-repeat 19px 11px, url('../img/assets/btn-mist.png') repeat-x 0 50% #284e9e;
}
.signintwitter{
background: url('../img/assets/facebook-signin.png') no-repeat 19px 11px, url('../img/assets/btn-mist.png') repeat-x 0 50% #78cdf0;
padding: 13px 51px !important;
margin: 0 auto;
font-weight: bold;
}
.signintwitter:hover{
background: url('../img/assets/facebook-signin.png') no-repeat 19px 11px, url('../img/assets/btn-mist.png') repeat-x 0 50% #59b6dc ;
}
#nav{
margin: 1px 0px 0 0px;
color: #777;
padding:0px;
float:right;
}
#nav>li{
float: right;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a{
display: block;
height: 50px;
line-height: 50px;
text-decoration: none;
color: #999;
font-weight: bold;
}
#nav>li>a:hover{
color: white;
}
#nav>li#user-profile{
float: right;
padding: 0px;
margin-left: 30px;
width: 51px;
margin-top: 0px;
}
#nav>li img{
float: right;
position: relative;
top:14px;
}
#nav li ul.nav-tabs{
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
position: absolute;
right: 0px;
display:none;
}
#nav li ul.nav-tabs li a{
display: block;
padding: 5px 15px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.nav-tabs li a:hover{
color: #ddd;
background: rgba(255,255,255,0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li ul.nav-tabs li{
clear: left;
margin: 0;
width: 100%;
}
#nav li#user-profile ul.nav-user-profile li:first-child a{
font-weight: bold;
}
#toggle-nav{
display: none;
}
#nav li#user-profile span.profile-name{
display: none;
}
#notify-btn-desktop{
background: url(../img/assets/notify.png) 0 0 no-repeat;
text-indent: -99999px;
display: inline-block;
height: 21px !important;
width: 31px;
}
#notify-btn-desktop:hover{
background: url(../img/assets/notify.png) 0 -22px no-repeat;
}
#message-btn-desktop{
background: url(../img/assets/message-icon-nav.png) no-repeat;
text-indent: -99999px;
display: inline-block;
height: 21px !important;
width: 31px;
margin-left:23px;
}
#message-btn-desktop:hover{
background: url(../img/assets/message-icon-nav.png) 0 -27px no-repeat;
}
@media screen and (max-width: 800px) {
#header-icons{
position: absolute;
top: 14px;
right: 20px;
}
}
#notify-btn-phone{
display: none;
}
.discover-tabs{
font-size: 14px;
padding-bottom: 4px;
float: left;
}
.discover-tabs li{
float: left;
padding-right: 40px;
}
.discover-tabs li a{
color: #777;
font-weight: normal;
}
.discover-tabs li a:hover{
color: #a6a6a6;
}
.discover-tabs .active{
font-weight:bold;
color: #444;
}
.line-break{
clear: both;
padding-top: 18px;
border-bottom: 2px solid #ddd;
}
.line-break.profile{
padding-top: 10px;
border-bottom: 2px solid #ddd;
}
.discover-tabs.right{
float: right;
font-size: 12px;
margin-top: 17px
}
.discover-tabs.right li{
padding-right: 15px;
}
.discover-tabs.right .last{
padding-right: 0px;
}
#charts-link{
margin-left: 40px;
margin-right: 140px;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
@media screen and (max-width: 800px){
#header{
position: fixed;
height: 40px;
}
#notify-btn-phone{
display: block;
}
#toggle-nav{
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background:red;
opacity: .5;
}
#logo a{
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo{
float: none;
padding-right: 0;
text-align: left;
}
#nav{
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
display: none;
background: #323232;
}
#nav li{
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: #323232;
}
#nav li:hover{
background: #2e2e2e;
}
#nav li ul.nav-tabs{
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.nav-tabs li a{
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile{
float: none;
}
#nav li#user-profile{
float: none;
}
#nav li#user-profile img{
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name{
display: inline-block;
}
#nav li a:hover{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
background: #2e2e2e;
}
#nav li ul.nav-tabs li a:hover{
color: #999;
background: none;
}
#nav li#user-profile ul.nav-tabs li:first-child{
display: none;
}
#header-inner{
width: auto;
padding: 0;
}
#nav li a{
height: auto;
padding: 15px;
font-size: 14px;
font-weight: bold;
line-height: 1;
border-top: 1px solid rgba(255,255,255,0.08);
color: #fff;
background: #323232;
}
#nav>li img{
top:0px;
}
#wrap-inner{
padding-top: 60px;
}
#nav li#user-profile #search{
margin-top: 0;
}
#nav li#user-profile{
position: relative;
top: auto;
right: auto;
padding: 0px;
margin: 0px;
width: 100%;
}
input.search-text{
width: 96%;
padding-top: 16px;
padding-bottom: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/assets/chart-sprite.png) 17px -161px no-repeat white;
font-size: 13px;
padding: 16px 5px 16px 44px;
margin-left: 12px;
margin-bottom: 10px;
}
#upload-responsive{
display: block !important;
}
#upload-green-btn{
display: none;
}
}
@media screen and (max-width: 800px){
.discover-tabs.right{
float: left;
}
}
@media screen and (max-width: 580px){
.discover-tabs li{
float: none;
line-height: 24px;
}
}
.tools, .tools a{
color: #aaa;
}
.tools{
margin: 0 auto !important;
text-align: center !important;
margin-top: 10px;
width: 200px;
}
#upload-container .display-box ul.tools li{
float: left ;
display: block;
clear: none;
margin: 0px;
padding: 0px;
width: auto;
}
#upload-container .display-box ul.tools .views{
background: url(../img/assets/chart-sprite.png) 0 -71px no-repeat;
height: 20px;
width: 30px;
padding-left: 24px;
margin-top: 4px;
float: right;
}
#upload-container .display-box ul.tools .share-this{
background: url(../img/assets/chart-sprite.png) 0 -102px no-repeat;
height: 20px;
width: 24px;
float: left;
}
#upload-container .display-box ul.tools .comments{
background: url(../img/assets/chart-sprite.png) 0 -38px no-repeat;
height: 20px;
width: 30px;
padding-left: 20px;
margin-left: 13px;
margin-top: 4px;
float: right;
}
#upload-container .display-box ul.tools .cheeky-kisses{
background: url(../img/assets/social-grey.png) 0 -39px no-repeat;
height: 20px;
width: 30px;
padding-left: 20px;
margin-left: 15px;
margin-top: 8px;
font-size: 11px;
font-weight: bold;
}
#upload-container .display-box ul.tools .ditches{
background: url(../img/assets/social-grey.png) 0 0px no-repeat;
height: 20px;
width: 30px;
padding-left: 20px;
margin-top: 4px;
margin-top: 8px;
font-size: 11px;
font-weight: bold;
}
#upload-container .user-info{
font-size:12px;
color: #aaa;
}
这就是您想要的吗http://jsfiddle.net/d6Cc8/6/
.toggleMenu {
display: none;
background: #ed1b2f;
padding: 10px 0;
color: #000;
text-transform: uppercase;
font-weight: bold;
margin: 15px 0 0 0;
width:100%;
text-align:center;
}
希望它能帮助您以这种方式编写js。
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 480) {
$("#toggle-nav").click(function () {
$("#nav").slideToggle('slow');
});
//
}else{
$("#nav").slideUp();// if its not worked write your code
}
}
$window
.resize(resize)
.trigger('resize');
});