bootstrap 下拉菜单的箭头指示器 ```markdown 下拉菜单的箭头指示器 ```

rhfm7lfc  于 2个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(57)

先决条件

建议

Bootstrap 中的下拉菜单在展开时不显示箭头指示器,但这对于某些类型的菜单非常有帮助,尤其是在导航栏上有多个图标按钮(无文本)的情况下——每个按钮都有一个下拉菜单,所以当下拉菜单展开时,视觉上立即不清楚哪个是激活的。
我想象箭头会像弹出窗口的箭头一样进行样式设计,并且可以通过向下拉菜单添加修饰符类来选择性地启用它。.

动机和背景

GitHub(以及其他许多网站)都使用了这些:

yvgpqqbh

yvgpqqbh1#

i.e. add transition for dropdown caret as in accordion

nhaq1z21

nhaq1z212#

任何寻找快速补丁的人,这个CSS会在菜单展开时翻转光标:

.dropdown-toggle[aria-expanded="true"]::after {
  transform: scale(-1, -1);
}

(如果使用dropstart变体,请使用::before)

相关问题