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

Question

我正在构建一个移动导航菜单,我正在将图标应用于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来演示这个问题.

Answer 1

由于您使用的是absolute位置,并且您没有为这些元素定义相对父级,因此它们不在流的范围内ul,因此不关心切换的隐藏溢出.尝试a亲戚:

#navbar > li a {
    position:relative;
}

UpdatedFiddle