Javascript 在其他对象具有类JQuery时设置项的动画

在这个代码片段中，我试图在菜单项具有活动类时对其绝对元素进行更改，但问题是当该类切换并从当前项中删除时，元素仍然具有相同的效果，并且没有输入else语句

正如您看到的，当单击菜单项中的任何一项时，类活动在菜单项之间切换，如果该项具有类活动，我将使用它来为元素执行此操作。否则就回来。 但是else语句不起作用，并将该行保留在菜单项下，尽管它不再具有活动类

$（函数（）{
“严格使用”；
变量$menuItem=$（'.nav li a'），
$hr=$（'hr'）；
$menuItem.on（'click'，函数（事件）{
$（'.active'）。不是（$（this））.removeClass（'active'）；
$（this.addClass（'active'）；
if（$（this）.hasClass（'active'））{
$（this.next（$hr）.animate（{width:“100%”），200）；
}否则{
$（this.next（$hr）.animate（{width:“0”}，200）；
}
event.stopPropagation（）；
});
});
.nav{
背景色：#222；
填充：15px 10px；
位置：固定；
排名：0；
左：0；
宽度：100%；
}
李国荣先生{
显示：内联；
利润率：0.20px；
位置：相对位置；
}
李丽娜先生{
文字装饰：无；
颜色：#fff；
}
.nav ul li a.有效{
颜色：红色；
}
#主页、关于、服务、联系{
高度：600px；
}
h1{
文本对齐：居中；
字体大小：30px；
填充：100px0；
}
人力资源{
位置：绝对位置；
宽度：0；
高度：2倍；
边界：无；
颜色：#ff0075；
背景色：#ff0075；
顶部：10px；
左：0；
z指数：-5；
}







由于您已将
活动的
类添加到当前元素，因此将执行
if
的truthy部分

您需要在ed元素上应用动画

$menuItem.filter('.active').next('hr').animate({
  width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
  width: "0"
}, 200);


$（函数（）{
“严格使用”；
变量$menuItem=$（'.nav li a'）；
$menuItem.on（'click'，函数（事件）{
$（'.active'）。不是（$（this））.removeClass（'active'）；
$（this.addClass（'active'）；
$menuItem.filter（'.active'）.next（'hr'）.animate({
宽度：“100%”
}, 200);
$menuItem.filter（'：非（.active'）。下一步（'hr'）。动画({
宽度：“0”
}, 200);
event.stopPropagation（）；
});
});
.nav{
背景色：#222；
填充：15px 10px；
位置：固定；
排名：0；
左：0；
宽度：100%；
}
李国荣先生{
显示：内联；
利润率：0.20px；
位置：相对位置；
}
李丽娜先生{
文字装饰：无；
颜色：#fff；
}
.nav ul li a.有效{
颜色：红色；
}
#家，
#关于,，
#服务，
#接触{
高度：600px；
}
h1{
文本对齐：居中；
字体大小：30px；
填充：100px0；
}
人力资源{
位置：绝对位置；
宽度：0；
高度：2倍；
边界：无；
颜色：#ff0075；
背景色：#ff0075；
顶部：10px；
左：0；
z指数：-5；
}















在if语句之前添加类，因此不进入else语句