jquery 按钮中的切换图标

Question

创建一个带有按钮的滑动顶部菜单栏，并尝试在单击时切换按钮图标，默认为向上倾斜，当单击并返回时，它变为向下倾斜等等。

所以 html 函数

不会发生这种情况

<!DOCTYPE HTML>
<html>
<head>
<title></title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
    type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"
    type="text/css">


<style type="text/css">
    header{position: relative;}
    .headerPrimary{min-height: 40px; background: black; color: white; padding: 20px 5px; width: 100%;}
    .headerSecondry{min-height: 100px; background: grey; color: black; padding: 20px 5px; width: 100%; }
    .closeDip{position: absolute; padding: 10px 5px; background: red; width: 50px; height: 30px; bottom: -30px; left: 100px; border-radius: 0 0 6px 6px; cursor: pointer;}

</style>


</head>

<body>

    <header>
        <div class="headerPrimary"></div>
        <div class="headerSecondry"></div>
        <div class="closeDip"></div>
    </header>

</body>

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">

    $(function(e){
        $(".closeDip").html('<i class="fa fa-angle-up"></>');
        $(".closeDip").click(function(){
            $(".headerSecondry").slideToggle(function(){
                $(".closeDip").html('<i class="fa fa-angle-down"></>');
            }).click(function(){
                $(".closeDip").html('<i class="fa fa-angle-up"></>');
            });
        });
    });

</script>

</html>

Answer 1

你可以这样做：

$(".closeDip").click(function(){
    var $this = $(this);
    $(".headerSecondry").slideToggle(function(){
        var icon = $this.find('.fa').hasClass('fa-angle-up') ? '<i class="fa fa-angle-down">' : '<i class="fa fa-angle-up">';
                //-------------^---missed it.
        $this.html(icon);
    });
});

在 .slideToggle() 方法中，您可以通过检查包含的元素是否具有 class 名称 fa-angle-up 来切换图标，因为您已将其附加到文档就绪。

$(".closeDip").html('<i class="fa fa-angle-up">[+]</i>');
$(".closeDip").click(function() {
      var $this = $(this);
      $(".headerSecondry").slideToggle(function() {
        var icon = $this.find('.fa').hasClass('fa-angle-up') ? '<i class="fa fa-angle-down">[-]</i>' : '<i class="fa fa-angle-up">[+]</i>';
        $this.html(icon);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='headerSecondry'>headerSecondry</div>
<div class="closeDip">[+]</div>

jquery 按钮中的切换图标

switching icon in a button with jquery

jquery

click