1. 程式人生 > >關於Layui 下拉按鈕在IE和火狐下不顯示問題

關於Layui 下拉按鈕在IE和火狐下不顯示問題

首先:製作下拉按鈕的程式碼如下

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就好了。