首先:製做下拉按鈕的代碼以下html
html:app
<div class="layui-btn layui-unselect layui-form-select downpanel" > <div class="layui-select-title"> 狀態流轉 <i class="layui-edge"></i> </div> <dl class="layui-anim layui-anim-upbit datastate"> </dl> </div>
Js:ui
$(".downpanel").on("click", ".layui-select-title", function (e) { var checkStatus = table.checkStatus(param.tableId) , checkData = checkStatus.data; //獲得選中的數據 if (checkData.length !== 1) { return layer.msg('請選擇一條數據!'); } else if (checkData[0].Cstate == 2) {//已終止 return layer.msg('當前狀態不容許修改!'); } else { $(".datastate").empty(); if (checkData[0].Cstate == 0) { $(".datastate").append('<dd lay-event="stateChange" flowitem="0" tostate="1"><i class="layui-icon layui-icon-edit"></i>未審覈-->審覈經過</dd>'); } else if (checkData[0].Cstate == 1) { $(".datastate").append('<dd lay-event="stateChange" flowitem="1" tostate="2"><i class="layui-icon layui-icon-edit"></i>審覈經過-->已終止</dd>'); }
//紅色部分動態添加下拉按鈕內容。若是不必就在Html寫死
$(".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).mouseup(function (e) { var userSet_con = $('.datastate'); if (!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0) { if ($(".layui-form-select").hasClass("layui-form-selected")) { $(".layui-form-select").toggleClass("layui-form-selected"); } } });
CSS:this
/**下拉按鈕*/ .downpanel { padding: 0; z-index: 9999999999; } .downpanel .layui-select-title { padding-right: 30px; padding-left: 10px; } .downpanel dl { color: #000; top: 30px; font-size: 14px; } .downpanel .layui-select-title i { border-top-color: #fff; } /**下拉按鈕結束*/
最後顯示結果以下:spa
個人問題之因此不IE和火狐下顯示問題是由於我把html裏的最外層容器使用的是button。後面無心中改爲了div就行了。code