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');
});

Answer 2

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

＆＃13;

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

＆＃13;

.dropdown.js-opened i {
  transform: rotate(180deg)
}

.dropdown.js-opened>ul {
  display: block
}

.dropdown>ul {
  display: none
}

＆＃13;

<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>

＆＃13;

点击即可上下改变雪佛龙

2 个答案: