javascript - 使用 :after selector to display icon in conjunction with 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