Jquery 旋转Twitter Bootstrap4导航栏菜单/子菜单插入符号

在这里寻求专家的帮助！我设法在BS4上旋转了原来的下拉插入符号。但是，我无法旋转子菜单插入符号，请任何人看一看并批评我可能做错了什么？我希望避免使用Fontsome来实现这一点，如果可能的话，将其保留在CSS和Bootstrap4中

谢谢，非常感谢

---

要解决这个问题，我们需要单击

。下拉子菜单。下拉切换

，添加/删除一个类，该类可以从左到下和从后更改插入符号的方向。完整代码如下：

$（'.dropdown menu a.dropdown-toggle'）。打开（'click'，函数（e）{
if（！$（this）.next（）.hasClass（'show'））{
$（this）.parents（'.dropdown menu'）.first（）.find（'.show'）.removeClass（“show”）；
}
var$子菜单=$（this.next（“.dropdown menu”）；
$subMenu.toggleClass（'show'）；
$（this）.parents（'li.nav item.dropdown.show'）.on（'hidden.bs.dropdown'，function（e）{
$（'.dropdown子菜单.show'）.removeClass（“show”）；
});
返回false；
});
/*对于顶级菜单*/
$（'.dropdown>.dropdown toggle'）。单击（函数（）{
if（$（this）.hasClass（'caretDown'））{
$（this.removeClass（'caretDown'）；
}否则{
$（this.addClass（'caretDown'）；
}
});
/*用于子菜单*/
$（'.dropdown子菜单>.dropdown切换'）。单击（函数（）{
if（$（this）.hasClass（'caretDown'））{
$（this.removeClass（'caretDown'）；
}否则{
$（this.addClass（'caretDown'）；
}
});
。下拉子菜单{
位置：相对位置；
}
.下拉子菜单a:：after{
变换：旋转（-90度）；
位置：绝对位置；
右：6px；
顶部：.8em；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
左边距：.1em；
右边距：.1rem；
}
#navbarDropdownMenuLink:：之后{
变换：旋转（-90度）；
}
a、 之后{
变换：旋转（0度）！重要；
}





































为了解决这个问题，我们需要点击
.dropdown子菜单。dropdown toggle
并添加/删除一个类，该类将插入符号的方向从左到下再向后更改。完整代码如下：


$（'.dropdown menu a.dropdown-toggle'）。打开（'click'，函数（e）{
if（！$（this）.next（）.hasClass（'show'））{
$（this）.parents（'.dropdown menu'）.first（）.find（'.show'）.removeClass（“show”）；
}
var$子菜单=$（this.next（“.dropdown menu”）；
$subMenu.toggleClass（'show'）；
$（this）.parents（'li.nav item.dropdown.show'）.on（'hidden.bs.dropdown'，function（e）{
$（'.dropdown子菜单.show'）.removeClass（“show”）；
});
返回false；
});
/*对于顶级菜单*/
$（'.dropdown>.dropdown toggle'）。单击（函数（）{
if（$（this）.hasClass（'caretDown'））{
$（this.removeClass（'caretDown'）；
}否则{
$（this.addClass（'caretDown'）；
}
});
/*用于子菜单*/
$（'.dropdown子菜单>.dropdown切换'）。单击（函数（）{
if（$（this）.hasClass（'caretDown'））{
$（this.removeClass（'caretDown'）；
}否则{
$（this.addClass（'caretDown'）；
}
});
。下拉子菜单{
位置：相对位置；
}
.下拉子菜单a:：after{
变换：旋转（-90度）；
位置：绝对位置；
右：6px；
顶部：.8em；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
左边距：.1em；
右边距：.1rem；
}
#navbarDropdownMenuLink:：之后{
变换：旋转（-90度）；
}
a、 之后{
变换：旋转（0度）！重要；
}




























.dropdown-toggle[aria-expanded="true"]:after {
  transform: rotate(-180deg);
}


.dropdown-toggle:after {
  transition: 0.2s;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}