2

私のサイトでは、下向き矢印から上向き矢印に変わる矢印を使用しようとしています。それが最も簡単な方法だと思うので、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;
}
4

1 に答える 1

2

そのような 2 つのクリック イベントをバインドすることはできません。代わりに、「クリック状態」を自分で管理する必要があります。

$(".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);
   }
});
于 2013-01-29T02:00:09.957 に答える