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

Question

我在 Foundation (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

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

Foundation button dropdown - reverse arrow on click

jquery

zurb-foundation