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

Answer 2

这是一种不好的方式，但你可以应用这样的风格：

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

问题使用：在选择器后与slideToggle（）一起显示图标

2 个答案:

UpdatedFiddle