html下拉菜单jq怎么设置,jquery+css实现下拉列表功能
廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所述：
fruit.hide {
display: none;
}
div {
float: left;
width: 100%;
}
.selector-containter {
margin-bottom: 10px;
}
.selector {
width: 200px;
background: #FFF;
border: 1px solid #DDD;
}
.selector-hint {
width: 178px;
border: 1px solid #DDD;
}
.selector-expand {
width: 8px;
border: 1px solid #DDD;
}
.selector-collapse {
width: 8px;
border: 1px solid #DDD;
}
$(document).ready(function() {
//使用on方法，采用事件委派機(jī)制，selector-option-container中的內(nèi)容為后續(xù)動(dòng)態(tài)追加
$('.selector').on('click', '.selector-expand', function() {
$(this).parent().children('.selector-option-container').children().remove();
$(this).parent().children('.selector-option-container').append('
apricot');$(this).parent().children('.selector-option-container').append('
banana');$(this).nextAll('.selector-option-container').removeClass('hide');
});
$('.selector').on('click', '.selector-collapse', function() {
$(this).nextAll('.selector-option-container').addClass('hide');
});
$('.selector-t1').on('click', '.selector-option', function() {
$(this).parent().parent().children('.selector-hint').text($(this).text());
$(this).parent().addClass('hide');
});
$('.selector-t1').on('click', '.selector-checkbox', function() {
$(this).parent().parent().parent().children('.selector-hint').text($(this).parent().next().text());
//采用prop方法，對(duì)于值為布爾型的屬性賦值
$(this).prop('checked', false);
$(this).parent().parent().addClass('hide');
});
});
select fruit+-select fruit+-總結(jié)
以上所述是小編給大家介紹的jquery+css實(shí)現(xiàn)下拉列表功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
總結(jié)
以上是生活随笔為你收集整理的html下拉菜单jq怎么设置,jquery+css实现下拉列表功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 撼讯RX 7900 XTX显卡超频：46
- 下一篇： canvas html 动态,canva