首先介绍一下怎么制作下拉按钮：
样式：
/**下拉按钮*/
.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;
}
/**下拉按钮结束*/
Javascript:
$(".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>');
}
$(".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");
}
}
});
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>
之所以在Google上可以，而IE、火狐不可以是因为我使用的是button不是Div
<button 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>
</button >
最终显示结果：
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
