代码 Demo
响应式菜单不能多次使用..
$(function() {
$('.reponsivemenu').css({
'opacity': '0'
});
$('a#showMenu').click(function() {
$('.reponsivemenu').css({
'opacity': '1'
});
$(this).addClass('active');
if ($('#showMenu').hasClass('active')) {
$(this).click(function() {
$('.reponsivemenu').css({
'opacity': '0'
});
$(this).removeClass('active');
});
}
});
});
它的代码只运行一次.. 什么是代码问题以及如何解决这个问题?
答案 0 :(得分:2)
使用
$('a#showMenu').click(function() {
if ($('#showMenu').hasClass('active')) {
$('.reponsivemenu').css({
'opacity': '0'
});
$(this).removeClass('active');
} else {
$('.reponsivemenu').css({
'opacity': '1'
});
$(this).addClass('active');
}
});
http://codepen.io/anon/pen/jPYMjE
$(function() {
$('.reponsivemenu').css({
'opacity': '0'
});
$('a#showMenu').click(function() {
if ($('#showMenu').hasClass('active')) {
$('.reponsivemenu').css({
'opacity': '0'
});
$(this).removeClass('active');
} else {
$('.reponsivemenu').css({
'opacity': '1'
});
$(this).addClass('active');
}
});
});
#showMenu {
position: absolute;
right:50px;
top: 40px;
z-index:999;
outline:none !important
}
#showMenu span, #showMenu span:before, #showMenu span:after {
transition: all 500ms ease-in-out 0s;
}
#showMenu span, #showMenu span:before, #showMenu span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #333 none repeat scroll 0% 0%;
position: absolute;
display: block;
content: "";
}
#showMenu span::before {
top: -10px;
}
#showMenu span::after {
bottom: -10px;
}
#showMenu.active span {
background-color: transparent;
}
#showMenu.active span::before {
transform: rotate(45deg);
}
#showMenu.active span::before, #showMenu.active span::after {
top: 0px;
}
#showMenu.active span::after {
transform: rotate(-45deg);
}
#showMenu.active span::before, #showMenu.active span::after {
top: 0px;
}
.reponsivemenu{
position:fixed;
background:url(../images/overlay.png);
z-index:50;
height:100%;
top:0;
right:0;
width:100%;
padding:10px 30px 50px 30px;
margin-bottom:50px;
font-size:16px;
}
.reponsivemenu ul li{
display:block;
margin:13px 0;
text-align:center
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript::" class="" id="showMenu"><span></span></a>
<div class="reponsivemenu">
<!-- <a href="javascript::" class="" id="closeMenu"><span></span></a> -->
<ul class="list-unstyled">
<li><a href="javascript::">The Services </a></li>
<li><a href="javascript::">The Experience </a></li>
<li><a href="javascript::">The Process </a></li>
<li><a href="javascript::">The Studio </a></li>
<li><a href="javascript::">The Team </a></li>
<li><a href="javascript::">The Lab </a></li>
<li><a href="javascript::">Contact </a></li>
</ul>
</div>
答案 1 :(得分:0)
public class Hashings {
private Gui gui;
public Hashings(Gui g)
{
gui = g;
}
}
$(function() {
//show/hide nav on page load
showHideNav();
$(window).scroll(function() {
//show/hide nav onwindow's scroll
showHideNav();
});
function showHideNav() {
if ($(window).scrollTop() > 60) {
//Show white nav
$("nav").addClass("white-nav-top");
// show dark logo
$(".navbar-brand-img").attr("src","img/logo/logo/png");
} else {
//Hide white nav
$("nav").removeClass("white-nav-top");
// show logo
$(".navbar-brand-img").attr("src","img/logo/logo/png");
}
}
});
//smooth scrolling
$(function () {
$("a.smooth.scroll").click(function(event) {
event.preventDefault();
//get id section #about #services #blog #portfolio #contact and etc
var section_id = $(this).attr("href");
$("html,body").animate({
scrollTop: $(section_id).offset().top - 64
}, 1250, "easeInOutExpo");
});
});
$(function() {
//show mobile nav //
$("#mobile-nav-open-btn").click(function() {
$("#mobile-nav").css("height", "100%");
});
// hide mobile nav //
$("#mobile-nav-close-btn, #mobile-nav-a").click(function() {
$("#mobile-nav").css("height", "0%");
});
});
.navbar{
padding: 35px 0 20px 0;
position: fixed;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.site-nav-wrapper{
padding:0 85px;
}
.navbar-brand{
padding: 13px 15px;
}
ul.navbar-nav > li > a{
font-family:"Raleway",sans-serif ;
color:#fff;
font-size:13px;
font-weight: 400px;
text-transform: uppercase;
letter-spacing: 1px;
}
ul.navbar-nav > li > a:hover,
ul.navbar-nav > li > a:focus{
background: none;
color:#f4c613;
}
/* white navigation */
.white-nav-top{
background: #fff;
padding:10px 0;
-webkit-box-shadow:0 8px 6px -9px #999;
box-shadow:0 8px 6px -9px #999;
z-index: 2;
}
.white-nav-top ul.navbar-nav >li >a{
color: #212226;
}
.white-nav-top ul.navbar-nav >li >a:hover,
.white-nav-top ul.navbar-nav >li >a:focus{
color:#f4c613;
}
/* scroll spy active state*/
.white-nav-top ul.navbar-nav > li.active >a{
color:#f4c613;
font-weight:500;
}
/*mobile menu */
.navbar-header{
position: relative;
}
#mobile-nav-open-btn{
font-size: 30px;
color: aqua;
cursor: pointer;
z-index: 2;
position: absolute;
right:0;
top:6px;
/* hide mobile nav open button*/
display: none;
}
#mobile-nav{
/* by default mobile nav will be hidden*/
height: 0%;
width: 100%;
position: fixed;
top:0;
left:0;
z-index: 3;
background-color: rgba(255, 255, 255, .9);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
overflow-y: hidden;
}
#mobile-nav-close-btn{
font-family:'Playfair Display', sans-serif;
font-size:70px;
color:#212226;
font-weight: 300;
cursor: pointer;
position: absolute;
top:-9px;
right: 13px;
-webkit-transition:.3s;
transition: .3s;
}
#mobile-nav-content{
text-align: center;
width: 100%;
margin-top: 30px;
position: relative;
top:10%;
}
#mobile-nav ul li{
margin-bottom: 20px;
}
#mobile-nav a{
font-family: "Raleway" , sans-serif;
font-size: 18px;
color:#212226;
font-weight: 400;
display: inline;
text-transform: uppercase;
-webkit-transition:.3s;
transition: .3s;
}
#mobile-nav a:hover,
#mobile-nav a:focus,
#mobile-nav-close-btn:hover,
#mobile-nav-close-btn:focus{
color:#f4c613;
background: none;
}
/* mobile nav scroll spy active state*/
.white-nav-top #mobile-nav ul.nav>li.active>a{
color:#f4c613;
font-weight:500;
}
/* extra small devices(Landscape phone & portrait tablets)*/
@media only screen and (min-width : 767px) {
.navbar{
padding: 20px 0;
}
.site-nav-wrapper,
.white-nav-top{
padding: 0;
}
/* show mobile nav oepn btn */
#mobile-nav-open-btn{
display: block;
}
}