更改字形向上和向下点击

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形并在它里面的清单，我想要做的是显示列表和隐藏的切换和我做到了这一点，我想要切换的雪佛龙也上下，我怎么能做到这一点？ 这里是我的代码：

Answer 1

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

Answer 2

你也可以使用jQuery的toggleClass方法和绑定的状态类，像

$("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>