下拉按钮菜单,更多功能

 下拉按钮菜单,更多功能:

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值