单击时上下更改人字形

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>

我有一个按钮，它有一个向上的人字形，里面有一个列表，我想做的是显示列表并在切换时隐藏它，我做到了，我希望向上的人字形也能在切换时改变上下，我该怎么做？这是我的代码：

Answer 1

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

Answer 2

您也可以使用 toggleClass jQuery 方法并绑定一个状态 class，就像那样

$("button").click(function() {
  $(this).parent('.dropdown').toggleClass('js-opened');
});

.dropdown.js-opened i {
  transform: rotate(180deg)
}

.dropdown.js-opened>ul {
  display: block
}

.dropdown>ul {
  display: none
}

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

单击时上下更改人字形

Change chevron up and down on click

jquery

onclick

toggle

twitter-bootstrap