首先:制作下拉按鈕的代碼如下
html:
<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:
$(".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:
/**下拉按鈕*/ .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; } /**下拉按鈕結束*/
最后顯示結果如下:

我的問題之所以不IE和火狐下顯示問題是因為我把html里的最外層容器使用的是button。后面無意中改成了div就好了。
