实现效果:

1.点击按钮展开下拉列表
2.点击下拉列表中的选项进行选择
3.点击除下拉列表外的body，收起下拉列表

效果如图:

下拉列表图例.png
1.html结构:

<div class="add_fy_cost"> 
    <!-- 点击按钮 -->
    <p class="pCost">行业</p>
    <!-- 下拉列表 -->
    <ul class="costName_box"> 
        <li>列表一</li>
        <li>列表二</li>
        <li>item3</li>
        <li>item4</li>
        <li>item55555</li>
    </ul>
</div>

2.jQuery:

    <script type="text/javascript"> 
        //点击行业 下拉
        $(".pCost").click(function(e){
            $('.costName_box').slideToggle();
            e = window.event || e;
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        });
        $(".costName_box").click(function (e) {
            e = window.event || e;
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        });
        $(document).click(function(){
            $('.costName_box').slideUp();
        });  
    </script>

css样式省略略略略略略略略............

function show(){
var e= arguments.callee.caller.arguments[0] || event;
if(e && e.stopPropagation){
e.stopPropagation();
}else if(window.event){
window.event.cancelBubble = true;
}
(".gray").show();
};
('html,body,.close').click(function(){
(".gray").hide();
});