JQ仿select框

  

点击[cy_title]后弹出[cy_list]层，选中里面的元素把值赋给 [cy_title]

在[cy_list] 打开的时候，点击其他地方可以关闭；

 

HTML：

<div class="brand_country" unselectable="on" style="-moz-user-select:none;" onselectstart="return false;"> 
   <div class="cy_title">
    <span class="cy_name">English</span>
    <i></i>
   </div> 
   <ul class="cy_list" style="display:none;"> 
    <li class="cy_active"><a href="javascript:void(0);">English</a></li> 
    <li><a href="javascript:void(0);">French</a></li> 
    <li><a href="javascript:void(0);">German</a></li> 
    <li><a href="javascript:void(0);">Swedish</a></li> 
    <li><a href="javascript:void(0);">Esperanto</a></li> 
    <li><a href="javascript:void(0);">Arabic</a></li> 
    <li><a href="javascript:void(0);">Myanmar (Burmese)</a></li> 
   </ul> 
  </div>

 

JQ：

$('.cy_title').click(function(){
    if ($('.cy_list').is(':visible')){
        $('.cy_list').hide(function(){
            $('body').unbind('click');
        });
    } else {
        $('.cy_list').show(10,function(){
            $('body').bind('click', function(){
                $('.cy_list').hide();
                $('body').unbind('click');
            })
        });
    }
});
    $('.cy_list li').click(function(){
        $('.cy_name').html($(this).text());
        $(this).addClass('cy_active').siblings().removeClass('cy_active');
        $('.cy_list').toggle();
    });