響應式菜單無法正常工作

Question

代碼演示

響應式菜單無法多次使用。

$(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');
      });
    }

  });

});

它的代碼只能運行一次。.什么是代碼問題，以及如何解決此問題？

Answer 1

采用

$('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> 

Answer 2

 $(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; } } 

 <header> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="site-nav-wrapper"> <div class="navbar-header"> <!-- main mobile open button menu --> <span id="mobile-nav-open-btn">&#9776;</span> <!-- logo--> <a class="navbar-brand smooth-scroll" href="#home"> </a> <div class="title-h1">RADIX</div> <div class="title-h2">Microsystems</div> </div> <!-- main menu --> <div class="container"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li><a class="smooth-scroll" href="#">Home</a></li> <li><a class="smooth-scroll" href="#">About</a></li> <li><a class="smooth-scroll" href="#">Services</a></li> <li><a class="smooth-scroll" href="#">Blog</a></li> <li><a class="smooth-scroll" href="#">Portfolio</a></li> <li><a class="smooth-scroll" href="#">Contact</a></li> </ul> </div> </div> <!--mobile menu --> <div id="mobile-nav"> <!--mobile menu close button--> <span id="mobile-nav-close-btn">&times;</span> <div id="mobile-nav-content"> <ul class="nav"> <li><a class="smooth-scroll" href="#home">Home</a></li> <li><a class="smooth-scroll" href="#about">About</a></li> <li><a class="smooth-scroll" href="#">Services</a></li> <li><a class="smooth-scroll" href="#">Blog</a></li> <li><a class="smooth-scroll" href="#">Portfolio</a></li> <li><a class="smooth-scroll" href="#">Contact</a></li> </ul> </div> </div> </div> </div> </nav> </header>