php 鼠标点击其他区域下拉框隐藏,类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件)...

实现效果:

1.点击按钮展开下拉列表

2.点击下拉列表中的选项进行选择

3.点击除下拉列表外的body，收起下拉列表

效果如图:

下拉列表图例.png

1.html结构:

行业

• 列表一
• 列表二
• item3
• item4
• item55555

2.jQuery:

//点击行业 下拉

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

});

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

});