学习笔记---模拟qq客户端选择账号并填充

// 给ul添加子元素

$('ul').append('<li class="single-li" data-id="dataVal">dataVal</li>')

// 点击按钮展示列表

$('btn').click(function (event) {
　　event.stopPropagation();// 取消事件冒泡
　　$('ul').show();// 显示账号选择列表
});

// 点击ul中的li，将li的值赋给input，然后隐藏ul列表

$('ul').on('click','li',function(){
　　$('#input').val($(this).data('id'));
　　$('ul').hide();
})

// 点击空白处隐藏下拉框

$(document).click(function(event){
　　var _con = $('ul');  // 设置目标区域
　　if(!_con.is(event.target) && _con.has(event.target).length === 0){ // 点击区域不是目标区域
　　　　_con .hide();
　　}
});