下拉按钮菜单，更多功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Lg632/article/details/89914557

 下拉按钮菜单，更多功能：

<style>
  .downpanel{
    padding: 0;
  }
  .downpanel .layui-select-title{
    padding-right:30px;
    padding-left:20px;
  }  
  .downpanel dl{
    position:absolute;
    z-index: 999;
    color: #000;
    top: 50px;
    font-size: 14px;      
  }
  .downpanel dl dd {
    position:relative;
    z-index: 999;
    width: 120px;
  }
  .downpanel .layui-select-title i{
    border-top-color:#fff;
  }
  .downpanel dl dd i{
    float: left;
  }
  #BatchBtn{
    position:relative;
    z-index:999;
  }
  #BatchBtn dl{
    position:absolute;
    z-index:999;
  }
</style>

<div class="layui-btn-group layui-form">
  <button type="button" class="layui-btn layui-unselect layui-form-select downpanel" id="BatchBtn">
    <div class="layui-select-title">更多操作<i class="layui-edge"></i></div>
    <dl class="layui-anim layui-anim-upbit">
      <dd data-id="delete" id="ApplyForRefund" title="1"><i class="layui-icon layui-icon-file"></i>1</dd>
      <dd data-id="move" id="upfuwuqi" title="2"><i class="layui-icon layui-icon-edit"></i>2</dd>
      <dd data-id="set" id="cancellation_of_order" title="3"><i class="layui-icon layui-icon-close-fill"></i>3</dd>
      <dd data-id="CancelAudit" id="endOrders" title="4"><i class="layui-icon layui-icon-close"></i>4</dd>
      <dd data-id="replace" id="editLog" title="5"><i class="layui-icon layui-icon-table"></i>5</dd>
     </dl>
  </button>
</div>

$(".downpanel").on("click",".layui-select-title",function(e){
      $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
      $(this).parents(".layui-form-select").toggleClass("layui-form-selected");
      e.stopPropagation();
});
$(document).click(function(event){
  var _con2 = $(".downpanel");
  if(!_con2.is(event.target) && (_con2.has(event.target).length === 0)){
     _con2.removeClass("layui-form-selected");
  }
  switch (event.target.id) {
    case 'ApplyForRefund':
      break;
    case 'upfuwuqi':
      break;
    case 'cancellation_of_order':
      break;
    case 'endOrders':
       break;
    case 'editLog': 
      break;
    default:
      break;
});