javascript - 响应式菜单无法正常工作

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>