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

Question

我正在构建一个移动导航菜单，我正在将一个图标应用到包含子元素（下拉箭头）的 li 元素。我正在使用 :after 伪选择器应用图标。问题是，当我使用 slideToggle 来 open/close 菜单时，箭头图标出现在菜单滑入到位之前。有什么办法可以防止这种情况发生，还是我必须使用其他方法？

#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

Answer 2

这是一种糟糕的方式，但您可以应用这样的样式：

#navbar[style*="overflow"] a:after {
   display:none!important;
}

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

Issue using :after selector to display icon in conjunction with slideToggle()

javascript

css

jquery

html-lists

UpdatedFiddle