Javascript 单击函数从不读取else语句以删除类

我一直停留在一个向下滑动的菜单上，但已经取得了一些进展。我不得不修改了很多，使之适用于桌面和移动视口。我现在唯一坚持的就是在<640px的视口中关闭菜单。 在我下面的代码片段和JSFIDLE中，有很多代码，但对这个问题真正重要的唯一代码是下面的javascript：

$('#serviceClick').click( function () {
    var relative = $(this);
    if (!relative.hasClass('activeSol')) {
        $('#serviceNav').removeClass('activeSol');
        $('#serviceNav').addClass('activeSol').slideDown();
    } else  {
        $('#serviceNav').removeClass('activeSol').slideUp(500);
    }
    return false;
});

基本上，我的else语句现在删除了类'activeSol'，然后向上滑动选择

在“移动”视口中，单击“解决方案”后，菜单将展开，但当您再次单击“解决方案”时，什么也不会发生

似乎变量

relative

从未像附加到它的类那样读取，使得click函数运行

else

。我做了一个简单的

控制台.log

，而else从未运行过。我尝试将

单击

功能更改为

更改

，但菜单从未触发

有人看到是什么导致我的else语句没有从

serviceNav

和

slideUp

中

removeClass

$（'#serviceClick'）。单击（函数（）{
var相对=$（此）；
如果（！relative.hasClass（'activeSol'））{
$（'#serviceNav'）.removeClass（'activeSol'）；
$（'#serviceNav'）.addClass（'activeSol'）.slideDown（）；
}否则{
$（'#serviceNav'）.removeClass（'activeSol'）.slideUp（500）；
}
返回false；
});
$（“[data pop close]”）。在（'click'，函数（e）上{
//var targeted_pop=$（this.attr（'data-pop-close'）；
$（'#serviceNav'）.removeClass（'activeSol'）；
$（'body'）.css（'overflow'，'auto'）；
e、 预防默认值（）；
});
nav{
背景：#FFF；
高度：70像素；
宽度：100%；
最大宽度：100%；
盒影：0px 6px 15px-4px rgba（0,0,0,0.12）；
位置：固定；
排名：0；
z指数：999；
框大小：边框框；
}
#导航标志{
浮动：左；
身高：100%；
宽度：自动；
显示：块；
位置：相对位置；
左缘：5%；
}
#导航标志{
身高：80%；
宽度：自动；
位置：绝对位置；
最高：50%；
转换：translateY（-50%）；-webkit转换：translateY（-50%）；
}
#移动按钮{
背景图像：url（“https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
背景尺寸：30px 30px；
浮动：对；
宽度：30px；
高度：30px；
保证金权利：5%；
边缘顶部：15px；
光标：指针；
显示：无；
转换：ease 0.3s；-webkit转换：ease 0.3s；
}
#移动按钮：悬停{
转换：ease 0.3s；-webkit转换：ease 0.3s；
}
#导航波普{
浮动：对；
显示：块；
保证金权利：5%；
边缘顶部：25px；
转换：易用0.5s；-webkit转换：易用0.5s；
}
#nav-pop.active{
不透明度：1；
背景：rgba（0,0,0,0.8）；
背景：#2f；
右：0；
边际上限：0；
右边距：0；
z指数：999999；
转换：易用0.6s；-webkit转换：易用0.6s；
转换：translateX（0）；-webkit转换：translateX（0）；
盒影：-9px 0px 9px 1px rgba（0,0,0,2）；
}
#导航列表李{
显示：内联块；
利润率：0.17px；
垂直对齐：顶部；
}
#导航列表李：第一个孩子{
左边距：0px；
}
#导航列表李：最后一个孩子{
右边距：0px；
}
#导航列表李a，#服务点击{
文字装饰：无；
字体系列：“Muli”，无衬线；
字体大小：.9rem；
颜色：#747678；
字母间距：1px；
垂直对齐：顶部；
转换：all.3s；-webkit转换：all.3s；
光标：指针；
}
#导航列表li a:after，#服务单击：after{
内容：''；
显示：块；
宽度：0；
边缘顶部：6px；
背景:"b82222 ;；
高度：2倍；
过渡：宽度3s；
}
#导航列表a:悬停，#服务单击：悬停{
颜色：#4b4b；
转换：all.3s；-webkit转换：all.3s；
}
#导航列表li a:悬停：之后，#服务单击：悬停：之后{
宽度：100%；
过渡：宽度3s；
}
#导航列表LIA.navInverse{
填充：10px 12px；
边界半径：2px；
框大小：边框框；
字体系列：“Muli”，无衬线；
字号：1.2rem；
颜色：#FFF；
边框：1px实心#b82222；
背景：线性梯度（至右下，#b82222，#A51EE）；
文本转换：大写；
文字装饰：无；
光标：指针；
}
#导航列表li a.navInverse:悬停{
背景:"b82222 ;；
背景：#FFF；
颜色：#b82222；
/*转换：全部0；-webkit转换：全部0*/
}
#导航列表li a.导航：在{
内容：''；
显示：无；
宽度：0px；
高度：0px；
过渡：无；
}
#导航弹出关闭{
显示：无；
}
#导航弹出关闭，#关闭面板{
位置：相对位置；
最高：3%；
左：90%；
背景图像：url（“https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
背景尺寸：30px 30px；
背景重复：无重复；
高度：30px；
宽度：30px；
光标：指针；
}
/*-服务导航-*/
#服务导航{
宽度：100%；
顶部：-40vh；
左：0；
z指数：-1；
位置：固定；
背景色：rgba（0,0,0,0）；
高度：40vh；
过渡：全部。4s；
填充：20px0；
}
#serviceNav.activeSol{
排名：0；
宽度：100%；
背景色：rgba（0,0,0,9）；
z指数：99999；
高度：40vh；
}
.弹出关闭{
位置：绝对位置；
右：12px；
顶部：12px；
宽度：32px；
高度：自动；
}
#服务导航{
利润率：0.5%；
身高：100%；
位置：相对位置；
}
/*---第一区---*/
#serviceNavBlock1{
宽度：33%；
身高：100%；
右边框：1px实心rgba（255255255.5）；
位置：相对位置；
}
#serviceNavBlock1Wrap{
宽度：80%；
文本对齐：左对齐；
}
/*---第2区---*/
#服务导航块2{
宽度：66.6%；
身高：100%；
利润率：10px自动；
位置：相对位置；
}
.servNavItemWrap{
显示：内联块；
垂直对齐：顶部；
宽度：25%；
边缘底部：50px；
文本对齐：居中；
光标：指针；
-webkit背面可见性：隐藏；
}
.servNavItemWrap img{
宽度：75px；
高度：75px；
-webkit转换：全部0.25秒；转换：全部0.25秒；
}
.servNavItemWrap:悬停img{
-webkit转换：全部0.25秒；转换：全部0.25秒；
-webkit转换：缩放（1.1）；转换：缩放（1.1）；
-webkit背面可见性：隐藏；
}
.ServNavitema
if (!$('#serviceNav').hasClass('activeSol')) {
    $('#serviceNav').removeClass('activeSol');
    $('#serviceNav').addClass('activeSol').slideDown();
} else  { 
    $('#serviceNav').removeClass('activeSol').slideUp(500);
}

    if (!relative.hasClass('activeSol')) {

$('#serviceClick').click( function () {
  var relative = $(this);
  if (!relative.hasClass('opened')) { // if it's not opened
    relative.addClass('opened');   // open it
    $('#serviceNav').removeClass('activeSol');
    $('#serviceNav').addClass('activeSol').slideDown();
  } else  { // if it's opened
    relative.removeClass('opened');  // close it
    $('#serviceNav').removeClass('activeSol').slideUp(500);
  }
  return false;
});