bootstrap的dropdown消失效果实现

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')
      }
    })