单击时上下更改 V 形

Question

 $("button").click(function () {
        $("ul").toggle();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> <img src="/images/default_avatar.jpg">Hello!<i class="fa fa-chevron-up"></i> </button>
                    <ul style="display:none;">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>

我有一个按钮，它有一个 V 形向上和一个列表，我想要做的是显示列表并在切换时隐藏它，我做到了，我希望 V 形向上也可以在切换时更改为向上和向下，我怎样才能做到这一点？这是我的代码：

Answer 1

$("button").click(function () {
    $("ul").toggle();
    $(this).children('.fa').toggleClass('fa-chevron-up fa-chevron-down');
});