html
<td class="funcbox hidden_fun_group" >
<button class="btn btn-success btn-small show_fun_group" id="test1">操作列表▼</button>
<ul class="dropdown-menu dropdown-inverse">
<li><a class="revoke" href="javascript:0">撤销红包(操作虚帐)</a></li>
<li><a class="revoke_only" href="javascript:0">撤销电子账户红包</a></li>
<li><a class="single_send" href="javascript:0">补派流水</a></li>
</ul>
</td>
css部分
dropdown样式用了bootstrap的
.hidden_fun_group ul{
display:none!important;
}
.funcbox.activited_fun_group ul{
display:block;
}
.funcbox{
position:relative;
}
js部分
点击body中除了buttom元素之外的元素，使drawdown部分消失。
同理可加限制指定某个类或者id。
//消失
$('body').on('click',function(e){
var status = $('.funcbox').hasClass('activited_fun_group')
var toElementTagName = e.toElement.tagName
if((toElementTagName!='BUTTON') && status){//限制条件
$('.funcbox').removeClass('activited_fun_group').addClass('hidden_fun_group')
}
})
//toggle显示
$('.show_fun_group').on('click',function(){
var show_status = $(this).parent('.funcbox').hasClass('activited_fun_group')
if(show_status){
$(this).parent('.funcbox').removeClass('activited_fun_group').addClass('hidden_fun_group')
}else{
$(this).parent('.funcbox').removeClass('hidden_fun_group').addClass('activited_fun_group')
}
})
