仿select下拉框，鼠标点击元素以外隐藏下拉框

两个问题

一、仿下拉框（select）

二、鼠标点击元素以外 下拉框隐

1、先说第一个问题：

<p class="return-select">
     <i></i>
     <span class="select-text">请选择</span>
</p>
<ul class="select-options">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

效果如图

//仿下拉框
$("#grMain-ph").on("click","p",function(){
       $(this).next("ul").toggle();
});

这样可以实现点击P元素实现ul的显示跟隐藏，但是我们只能操作p元素，不能实现点击P元素以外的任何地方隐藏ul.

2、实现点击p元素以外任何区域隐藏ul

//阻止冒泡事件
function stopPropagation(e) {        
    if (e.stopPropagation)
          e.stopPropagation();
      else
     e.cancelBubble = true;
}  
//点击除p元素以外隐藏下拉
$(document).bind("click",function(){
     $("ul").hide();
});
//点击元素本身，停止冒泡
$("#grMain-ph").on("click","p",function(e){
     stopPropagation);
});

以上实现了仿select 下拉框!