响应式菜单无法正常工作

Question

代码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');
      });
    }

  });

});

它的代码只运行一次.. 代码有什么问题以及如何解决这个问题？

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>

响应式菜单无法正常工作

Responsive menu not working properly

html

javascript

css

jquery

menu