bootstrap的dropdown消失效果实现

html

                  操作列表▼   
                  

                    
撤销红包(操作虚帐)
                    
撤销电子账户红包
                    
补派流水
                  
                

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