Question

我使用粉底（http://foundation.zurb.com/docs/components/dropdown_buttons.html）中的按钮下拉菜单，有没有办法在菜单打开时将点击向下箭头更改为向上箭头？然后回到关闭时的向下箭头？

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

Answer 1

将此规则添加到CSS中：

.dropdown[aria-expanded="true"]::after {
   border-color: transparent transparent white;
   top: 40%;
}

然后它应该像你需要的那样工作。

CodePen example

基础按钮下拉菜单 - 单击反向箭头

1 个答案: