上下箭頭onclick

Question

我已經為一個按鈕創建了HTML和CSS，在其中我需要基於單擊的上下箭頭切換。 我對HTML和CSS很好，但是在使用jQuery方面卻不太好。 有人可以開始我嗎？ 單擊.js-custom-sleeve-option時，箭頭應向上/向下更改。

 .js-custom-sleeve-option { width: auto; min-width: 3.8rem; height: 3rem; display: inline-block; border: 1px solid #d1cac5; background: #f7f7f7; margin-right: 0.5rem; margin-bottom: 0.5rem; text-align: center; } .js-arrow-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #233354; position: relative; left: 7px; } .js-arrow-up { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #233354; position: relative; left: 6px; bottom: 12px; } 

 <div> <a class="js-custom-sleeve-option"> <span class="js-arrow-down"></span> </a> </div> 

Answer 1

這將是這樣的..當然您必須根據需要對其進行修改

$(function(){
$(".js-custom-sleeve-option").on('click' , function(){
  this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up');
});
});

Answer 2

您可以使用jquery函數的toggleClass()

 $('.js-custom-sleeve-option').click(function(){ $(this).children('span').toggleClass('js-arrow-down js-arrow-up') }) 

 .js-custom-sleeve-option { width: auto; min-width: 3.8rem; height: 3rem; display: inline-block; border: 1px solid #d1cac5; background: #f7f7f7; margin-right: 0.5rem; margin-bottom: 0.5rem; text-align: center; } .js-arrow-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #233354; position: relative; left: 7px; } .js-arrow-up { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #233354; position: relative; left: 6px; bottom: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a class="js-custom-sleeve-option"> <span class="js-arrow-down"></span> </a> </div>