屏幕闪烁 - jQuery响应式导航菜单
我遇到了jQuery问题。
我按照下面的方式复制某人的代码，当我点击每个项目时，jquery有一个问题，即屏幕会刷新。
我不知道为什么？有人能帮助我吗？非常感谢。
$(document).ready(function () {
$("#rwdbtn-a").click(function () {
$(".rwd-overlay").fadeToggle(200);
$(this).toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
});
$('.rwd-overlay').on('click', function () {
$(".rwd-overlay").fadeToggle(200);
$(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
});
$('.rwd-menu a').on('click', function () {
$(".rwd-overlay").fadeToggle(200);
$(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
});
});/*
Theme Name: CthuKi Responsive Navigation Menu
Author: Maria Zulauf
Version: 1.0
*/
/* ================================================
Base
============================================= */
body {
height: 100%;
margin: 0;
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/escheresque_ste.png");
/* Background pattern from subtlepatterns.com */
background-color: #111;
color: #fff;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: black;
}
.section-1 {
background: rgba(0, 0, 0, 0.4);
}
.main {
background: #fff;
}
.aside-1 {
background: tomato;
}
.article-1 {
background: darkturquoise;
}
.article-2 {
background: wheat;
}
.article-3 {
background: steelblue
}
.section-2 {
background: rgba(0, 0, 0, 0.4);
}
.footer {
background: #222;
}
/* ================================================
Typography
============================================= */
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600|Roboto:400,700';
/* ================================================
Diverses
============================================= */
/* ================================================
Layout
============================================= */
/*HEADER*/
.header {
height: 31px;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*LOGO*/
.menu-logo {
z-index: 999;
position: absolute;
display: inline;
top: 1%;
left: 60px;
font-size: 32px;
}
.menu-logo a {
display: inline-block;
text-decoration: none;
color: #fff;
-o-transition:color .2s ease-out;
-ms-transition:color .2s ease-out;
-moz-transition:color .2s ease-out;
-webkit-transition:color .2s ease-out;
transition:color .2s ease-out;
}
.menu-logo a:hover{
color: darkturquoise;
}
/*NAV*/
.nav-1 {
z-index: 999;
position: absolute;
display: inline;
top: 1.5%;
right: 60px;
width:500px;
font-size: 20px;
}
.menu-1 ul {
display:flex;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.menu-1 li {
display: inline;
width:100%;
list-style: none;
text-align: center;
font-family: 'Raleway', sans-serif;
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.menu-1 li a {
width:100%;
margin: 0 10px;
color: #fff;
vertical-align: middle;
text-decoration: none;
-o-transition:color .2s ease-out;
-ms-transition:color .2s ease-out;
-moz-transition:color .2s ease-out;
-webkit-transition:color .2s ease-out;
transition:color .2s ease-out;
}
.menu-1 li a:hover{
/* border-bottom: 2px solid #fff; */
color: darkturquoise;
}
.menu-logo a:active, .menu-1 li a:active{
color: rgba(0, 206, 209, .9);
}
/*HAMBURGER NAV*/
.rwd-menu a {
text-decoration: none;
transition: all 600ms ease-in-out;
}
/* OPEN / CLOSE BTNS */
.rwd-menu-btn {
z-index: 999;
position: absolute;
display: inline;
top: 7px;
right: 6%;
font-size: 32px;
}
.rwd-menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.rwd-btn-open:after {
content: "\f0c9";
color: #fff;
font-family: "fontawesome";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-btn-open:hover:after {
color: darkturquoise;
}
.rwd-btn-close:after {
content: "\f00d";
color: #fff;
font-family: "fontawesome";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-btn-close:hover:after {
color: darkturquoise;
}
/* OVERLAY */
.rwd-overlay {
z-index: 99;
position: fixed;
display: none;
overflow: hidden;
top: 51px;
right: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgba(17,17,17, 0.3);
}
.rwd-menu {
width: 45%;
height: 100%;
float:right;
background: rgba(17,17,17, 0.6);
}
.rwd-menu ul {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.rwd-menu li {
display: table;
margin: 0;
padding: 0;
width: 100%;
height: 10%;
list-style: none;
text-align: center;
font-family: 'Raleway', sans-serif;
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-menu li a {
display: table-cell;
color: #fff;
vertical-align: middle;
text-decoration: none;
}
.rwd-menu li:hover, .rwd-menu li a:hover {
color: #fff;
}
/* Sweep To Right */
.rwd-sweep {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.rwd-sweep:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: darkturquoise;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.rwd-sweep:hover, .rwd-sweep:focus, .rwd-sweep:active {
color: #fff;
}
.rwd-sweep:hover:before, .rwd-sweep:focus:before, .rwd-sweep:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ================================================
Responsive
============================================= */
@media all and (max-width: 800px) {
.nav-1{
display:none;
}
.nav-rwd{
visibility: visible;
}
}
@media all and (min-width: 800px) {
.nav-rwd{
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header class="header">
<div class="menu-logo">
<a id="home" class="logo-sm" href="#">CthuKi</a>
</div>
<nav class="nav-1">
<div class="menu-1">
<ul>
<li href="#home"> <a>Home</a></li>
<li href="#"><a>Blog</a></li>
<li href="#"><a>Portfolio</a></li>
<li href="#"><a>About</a></li>
<li href="#"><a>Contact</a></li>
</ul>
</div>
</nav>
<!-- RWD Navigation-->
<nav class="nav-rwd">
<div class="rwd-menu-btn">
<a id="rwdbtn-a" class="rwd-btn-open" href="javascript:void(0)"></a>
</div>
<div class="rwd-overlay">
<div class="rwd-menu">
<ul>
<li class="rwd-sweep" href="#"><a>Home</a></li>
<li class="rwd-sweep" href="#"><a>Blog</a></li>
<li class="rwd-sweep" href="#"><a>Portfolio</a></li>
<li class="rwd-sweep" href="#"><a>About</a></li>
<li class="rwd-sweep" href="#"><a>Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
</section>
</body>
1 个答案:
答案 0 :(得分：0)
这是因为jquery代码。
$('.rwd-menu a').on('click', function () {
$(".rwd-overlay").fadeToggle(200);
$(".rwd-menu-btn a").toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
});
用户点击每个菜单项后，导航容器会导致其消失并重新出现。如果你只是复制并粘贴代码而不是学习和做自己的代码，这就是问题所在。您必须了解它的工作原理以及如何使用它。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function () {
$("#rwdbtn-a").click(function () {
$(".rwd-overlay").fadeToggle(200);
$(this).toggleClass('rwd-btn-open').toggleClass('rwd-btn-close');
});
});/*
Theme Name: CthuKi Responsive Navigation Menu
Author: Maria Zulauf
Version: 1.0
*/
/* ================================================
Base
============================================= */
body {
height: 100%;
margin: 0;
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/escheresque_ste.png");
/* Background pattern from subtlepatterns.com */
background-color: #111;
color: #fff;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: black;
}
.section-1 {
background: rgba(0, 0, 0, 0.4);
}
.main {
background: #fff;
}
.aside-1 {
background: tomato;
}
.article-1 {
background: darkturquoise;
}
.article-2 {
background: wheat;
}
.article-3 {
background: steelblue
}
.section-2 {
background: rgba(0, 0, 0, 0.4);
}
.footer {
background: #222;
}
/* ================================================
Typography
============================================= */
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600|Roboto:400,700';
/* ================================================
Diverses
============================================= */
/* ================================================
Layout
============================================= */
/*HEADER*/
.header {
height: 31px;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*LOGO*/
.menu-logo {
z-index: 999;
position: absolute;
display: inline;
top: 1%;
left: 60px;
font-size: 32px;
}
.menu-logo a {
display: inline-block;
text-decoration: none;
color: #fff;
-o-transition:color .2s ease-out;
-ms-transition:color .2s ease-out;
-moz-transition:color .2s ease-out;
-webkit-transition:color .2s ease-out;
transition:color .2s ease-out;
}
.menu-logo a:hover{
color: darkturquoise;
}
/*NAV*/
.nav-1 {
z-index: 999;
position: absolute;
display: inline;
top: 1.5%;
right: 60px;
width:500px;
font-size: 20px;
}
.menu-1 ul {
display:flex;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.menu-1 li {
display: inline;
width:100%;
list-style: none;
text-align: center;
font-family: 'Raleway', sans-serif;
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.menu-1 li a {
width:100%;
margin: 0 10px;
color: #fff;
vertical-align: middle;
text-decoration: none;
-o-transition:color .2s ease-out;
-ms-transition:color .2s ease-out;
-moz-transition:color .2s ease-out;
-webkit-transition:color .2s ease-out;
transition:color .2s ease-out;
}
.menu-1 li a:hover{
/* border-bottom: 2px solid #fff; */
color: darkturquoise;
}
.menu-logo a:active, .menu-1 li a:active{
color: rgba(0, 206, 209, .9);
}
/*HAMBURGER NAV*/
.rwd-menu a {
text-decoration: none;
transition: all 600ms ease-in-out;
}
/* OPEN / CLOSE BTNS */
.rwd-menu-btn {
z-index: 999;
position: absolute;
display: inline;
top: 7px;
right: 6%;
font-size: 32px;
}
.rwd-menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.rwd-btn-open:after {
content: "\f0c9";
color: #fff;
font-family: "fontawesome";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-btn-open:hover:after {
color: darkturquoise;
}
.rwd-btn-close:after {
content: "\f00d";
color: #fff;
font-family: "fontawesome";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-btn-close:hover:after {
color: darkturquoise;
}
/* OVERLAY */
.rwd-overlay {
z-index: 99;
position: fixed;
display: none;
overflow: hidden;
top: 51px;
right: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgba(17,17,17, 0.3);
}
.rwd-menu {
width: 45%;
height: 100%;
float:right;
background: rgba(17,17,17, 0.6);
}
.rwd-menu ul {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.rwd-menu li {
display: table;
margin: 0;
padding: 0;
width: 100%;
height: 10%;
list-style: none;
text-align: center;
font-family: 'Raleway', sans-serif;
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.rwd-menu li a {
display: table-cell;
color: #fff;
vertical-align: middle;
text-decoration: none;
}
.rwd-menu li:hover, .rwd-menu li a:hover {
color: #fff;
}
/* Sweep To Right */
.rwd-sweep {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.rwd-sweep:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: darkturquoise;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.rwd-sweep:hover, .rwd-sweep:focus, .rwd-sweep:active {
color: #fff;
}
.rwd-sweep:hover:before, .rwd-sweep:focus:before, .rwd-sweep:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ================================================
Responsive
============================================= */
@media all and (max-width: 800px) {
.nav-1{
display:none;
}
.nav-rwd{
visibility: visible;
}
}
@media all and (min-width: 800px) {
.nav-rwd{
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header class="header">
<div class="menu-logo">
<a id="home" class="logo-sm" href="#">CthuKi</a>
</div>
<nav class="nav-1">
<div class="menu-1">
<ul>
<li href="#home"> <a>Home</a></li>
<li href="#"><a>Blog</a></li>
<li href="#"><a>Portfolio</a></li>
<li href="#"><a>About</a></li>
<li href="#"><a>Contact</a></li>
</ul>
</div>
</nav>
<!-- RWD Navigation-->
<nav class="nav-rwd">
<div class="rwd-menu-btn">
<a id="rwdbtn-a" class="rwd-btn-open" href="javascript:void(0)"></a>
</div>
<div class="rwd-overlay">
<div class="rwd-menu">
<ul>
<li class="rwd-sweep" href="#"><a>Home</a></li>
<li class="rwd-sweep" href="#"><a>Blog</a></li>
<li class="rwd-sweep" href="#"><a>Portfolio</a></li>
<li class="rwd-sweep" href="#"><a>About</a></li>
<li class="rwd-sweep" href="#"><a>Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
</section>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？