Выпадающее меню кнопки фонда - обратная стрелка при нажатии

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