jquery - css改变jquery语法

Question

对于我的网站，我尝试使用从向下箭头变为向上箭头的箭头。我想使用 css 更改，因为我觉得这是最简单的方法。我的代码是

$(".first1").on('click', 
  function () {
$('.arrow-down').css({"display" : "none"});
    $('.arrow-up').css({"display" : "inline"});
  },
  function () {
    $('.arrow-down').css({"display" : "inline"});
    $('.arrow-up').css({"display" : "none"});
  });
$(".last1").on('click', 
  function () {
    $('.arrow-down').css({"display" : "none"});
    $('.arrow-up').css({"display" : "inline"});
  },
  function () {
    $('.arrow-down').css({"display" : "inline"});
    $('.arrow-up').css({"display" : "none"});
  });

和

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #FDFECD;
    display: none;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid #FDFECD;
    display: inline;
}

Answer 1

您不能像这样绑定(bind)两个点击事件。相反，您必须自己管理“点击状态”:

$(".first1, .last1").data('active', false);

$(".first1, .last1").on('click', function () {
   if ($(this).data('active')) {
      $('.arrow-down').css({"display" : "none"});
      $('.arrow-up').css({"display" : "inline"});
      $(this).data('active', false);
   }
   else {
     $('.arrow-down').css({"display" : "inline"});
     $('.arrow-up').css({"display" : "none"});
     $(this).data('active', true);
   }
});