html下拉菜单jq怎么设置,jquery+css实现下拉列表功能

废话不多说了，直接给大家贴代码了，具体代码如下所述：

.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('

$(this).parent().children('.selector-option-container').append('

$(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');

});

});

总结

以上所述是小编给大家介绍的jquery+css实现下拉列表功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！