Javascript 响应菜单工作不正常

代码

响应式菜单一次以上不起作用

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

  });

});

它的代码只运行一次。。 代码上存在什么问题以及如何解决此问题？

使用

$('a#showMenu').click(function() {


    if ($('#showMenu').hasClass('active')) {
      $('.reponsivemenu').css({
        'opacity': '0'
      });
      $(this).removeClass('active');
    } else {
      $('.reponsivemenu').css({
        'opacity': '1'
      });
      $(this).addClass('active');
    }

  });

$（函数（）{
$（'.reponsivemenu'）.css({
“不透明度”：“0”
});
$（'a#showMenu'）。单击（函数（）{
if（$（'#showMenu'）.hasClass（'active'））{
$（'.reponsivemenu'）.css({
“不透明度”：“0”
});
$（this.removeClass（'active'）；
}否则{
$（'.reponsivemenu'）.css({
“不透明度”：“1”
});
$（this.addClass（'active'）；
}
});
});
#显示菜单{
位置：绝对位置；
右：50px；
顶部：40px；
z指数：999；
大纲：没有！重要
}
#显示菜单范围，#显示菜单范围：之前，#显示菜单范围：之后{
过渡：所有500毫秒均缓进0秒，缓出0秒；
}
#显示菜单范围，#显示菜单范围：之前，#显示菜单范围：之后{
光标：指针；
边界半径：1px；
高度：5px；
宽度：35px；
背景：#333无重复滚动0%0%；
位置：绝对位置；
显示：块；
内容：“；
}
#showMenu span:：before{
顶部：-10px；
}
#showMenu span:：after{
底部：-10px；
}
#showMenu.activespan{
背景色：透明；
}
#showMenu.active span:：before{
变换：旋转（45度）；
}
#showMenu.active span:：before，#showMenu.active span:：after{
顶部：0px；
}
#showMenu.active span:：after{
变换：旋转（-45度）；
}
#showMenu.active span:：before，#showMenu.active span:：after{
顶部：0px；
}
.回复菜单{
位置：固定；
背景：url（../images/overlay.png）；
z指数：50；
身高：100%；
排名：0；
右：0；
宽度：100%；
填充：10px 30px 50px 30px；
边缘底部：50px；
字体大小：16px；
}
李先生{
显示：块；
边际：13px0；
文本对齐：居中
}











$（函数（）{
//页面加载时显示/隐藏导航
showHideNav（）；
$（窗口）。滚动（函数（）{
//显示/隐藏导航窗口的滚动条
showHideNav（）；
});
函数showHideNav（）{
如果（$（窗口）.scrollTop（）>60）{
//显示白色导航
$（“导航”）.addClass（“白色导航顶部”）；
//显示黑色标志
美元（“.navbar品牌img”）.attr（“src”、“img/logo/logo/png”）；
}否则{
//隐藏白色导航
$（“导航”）.removeClass（“白色导航顶部”）；
//展示标志
美元（“.navbar品牌img”）.attr（“src”、“img/logo/logo/png”）；
}
}
});
//平滑滚动
$（函数（）{
$（“a.smooth.scroll”）。单击（函数（事件）{
event.preventDefault（）；
//获取id部分#关于#服务#博客#投资组合#联系人等
var section_id=$（this.attr（“href”）；
$（“html，body”）.animate({
scrollTop:$（节id）.offset（）.top-64
}，1250，“easeInOutExpo”）；
});
});
$（函数（）{
//显示移动导航//
$（“#移动导航打开btn”）。单击（函数（）{
$（“#移动导航”）.css（“高度”、“100%”）；
});
//隐藏移动导航//
$（“#移动导航关闭btn，#移动导航-a”）。单击（函数（）{
$（“#移动导航”）.css（“高度”、“0%”）；
});
});
.navbar{
填充：35px 0 20px 0；
位置：固定；
-webkit转换：所有300ms线性；
过渡：所有300ms线性；
}
.站点导航包装器{
填充：0.85px；
}
.navbar品牌{
填充：13px 15px；
}
ul.navbar-nav>li>a{
字体系列：“Raleway”，无衬线；
颜色：#fff；
字体大小：13px；
字体大小：400px；
文本转换：大写；
字母间距：1px；
}
ul.navbar-nav>li>a：悬停，
ul.navbar-nav>li>a：焦点{
背景：无；
颜色：#f4c613；
}
/*白色导航*/
.白色导航顶部{
背景：#fff；
填充：10px0；
-网络工具包盒阴影：0 8px 6px-9px#999；
盒影：0 8px 6px-9px#999；
z指数：2；
}
.白色导航顶部ul.navbar-nav>li>a{
颜色：#212226；
}
.白色导航顶部ul.navbar-nav>li>a:悬停，
.白色导航顶部ul.navbar-nav>li>a:焦点{
颜色：#f4c613；
}
/*滚动间谍活动状态*/
.白色导航顶部ul.navbar-nav>li.active>a{
颜色：#f4c613；
字号：500；
}
/*移动菜单*/
.导航栏标题{
位置：相对位置；
}
#移动导航开放式btn{
字体大小：30px；
颜色：浅绿色；
光标：指针；
z指数：2；
位置：绝对位置；
右：0；
顶部：6px；
/*隐藏移动导航打开按钮*/
显示：无；
}
#移动导航{
/*默认情况下，移动导航将隐藏*/
身高：0%；
宽度：100%；
位置：固定；
排名：0；
左：0；
z指数：3；
背景色：rgba（255、255、255、.9）；
-webkit转换：所有300ms线性；
过渡：所有300ms线性；
溢出y：隐藏；
}
#移动导航关闭btn{
字体系列：'Playfair Display'，无衬线；
字体大小：70px；
颜色：#212226；
字体大小：300；
光标：指针；
位置：绝对位置；
顶部：-9px；
右：13px；
-webkit转换：.3s；
过渡：.3s；
}
#移动导航内容{
文本对齐：居中；
宽度：100%；
边缘顶部：30px；
位置：相对位置；
排名前10%；
}
#移动导航{
边缘底部：20px；
}
#移动导航a{
字体系列：“Raleway”，无衬线；
字号：18px；
颜色：#212226；
字体大小：400；
显示：内联；
文本转换：大写；
-webkit转换：.3s；
过渡：.3s；
}
#移动导航a：悬停，
#移动导航a：焦点，
#移动导航关闭btn：悬停，
#移动导航关闭btn：焦点{
颜色：#f4c613；
背景：无；
}
/*移动导航滚动间谍活动状态*/
.白色导航顶部#移动导航ul.nav>li.active>a{
颜色：#f4c613；
字号：500；
}
/*超小型设备（横向电话）