对于我的网站,我尝试使用从向下箭头变为向上箭头的箭头。我想使用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;
}
最佳答案
您不能像这样绑定两个点击事件。相反,您必须自己管理“点击状态”:
$(".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);
}
});