廢話不多說了，直接給大家貼代碼了，具體代碼如下所述：

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方法，采用事件委派機制，selector-option-container中的內容為后續動態追加

$('.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方法，對于值為布爾型的屬性賦值

$(this).prop('checked', false);

$(this).parent().parent().addClass('hide');

});

});

select fruit+-select fruit+-

總結

以上所述是小編給大家介紹的jquery+css實現下拉列表功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

總結

以上是生活随笔為你收集整理的html下拉菜单jq怎么设置,jquery+css实现下拉列表功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。