javascript – 问题使用：在选择器后与slideToggle()一起显示图标

我正在构建一个移动导航菜单,我正在将一个图标应用于包含子项的li元素(下拉箭头).我使用：after伪选择器应用图标.问题是当我使用slideToggle打开/关闭菜单时,在菜单滑入到位之前会出现箭头图标.有什么方法可以防止这种情况,还是我必须采用不同的方法？

#navbar li.has-child > a:after {
            color: red;
            content: ' ▸';
            display:inline-block;
            position:absolute;
            right:30px;
        }
            #navbar li.has-child > a.open:after {
                content: ' ▾';
            }

这是一个证明问题的JSFiddle.

解决方法:

由于您使用的是绝对位置,并且您没有为这些元素定义相对父级,因此它们不在ul的流程之外,因此不关心切换的隐藏溢出.试着做一个亲戚：

#navbar > li a {
    position:relative;
}

UpdatedFiddle

标签：javascript,jquery,css,html-lists
来源： https://codeday.me/bug/20190830/1766109.html