如何将自定义类添加到选择选项元素。
场景:当我单击并打开一个选择选项时,应添加“ class = open”,当它在dom外部单击或选择某个选项或再次单击该下拉菜单时,应添加“ class = close”。
我的代码:
<select id="sKMob_orderStatus">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select id="skMob_orderDate">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
$('#sKMob_orderStatus').addClass('open');
console.log("triggered");
});
参考样本:http://jsfiddle.net/T4yUm/298/
任何人都可以提出答案。
提前致谢。
最佳答案
像这样在您的jquery代码中添加另一个函数:
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
if($("#sKMob_orderStatus").hasClass('open'))
{
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
}
else{
$('#sKMob_orderStatus').removeClass('close');
$('#sKMob_orderStatus').addClass('open');
}
console.log("triggered");
});
$(document).click(function(event) {
if (!$(event.target).is("#sKMob_orderStatus, #skMob_orderDate")) {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
console.log("triggered back");
}
});
$("#sKMob_orderStatus, #skMob_orderDate").on("change" ,function(event) {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
console.log("triggered back");
});
第二个函数将检查是否在元素外部单击,它将删除
open
类并添加close
类。