【Bootstrap3.0建站笔记二】按钮可下拉弹出层

最新推荐文章于 2021-06-04 04:07:49 发布

下一秒_待续

最新推荐文章于 2021-06-04 04:07:49 发布

阅读量1.8k

点赞数 1

分类专栏： web前端文章标签： Bootstrap3.0 按钮可下拉弹出层

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/chinaplan/article/details/32713965

版权

web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

1、按钮可下拉弹出层：

HTML代码：

<div class="porpre">
                                                        <div class="input-group-btn" style="width: auto">
                                                            <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=CustomerDetail" class="btn btn-primary dropdown-toggle">    查  看    </a>
                                                            <a href="javascript:void(0);" οnclick="btngroupClick(this,event)" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                                        </div>
                                                        <div style="display: block;" class="pHide" id="pHide">
                                                            <ul>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=ViewAccount" class="btn btn-success ">查看子号</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=Records" class="btn btn-info ">推荐记录</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=FailureOrder" class="btn btn-warning ">未报订单</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=DaijiaRecords" class="btn btn-danger ">代驾记录</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=RechargeRecord" class="btn btn-primary ">充值记录</a>
                                                                </li>
                                                                <li class="ma">
                                                                    <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=BillingRecord" class="btn btn-warning ">开票记录</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>

弹出层CSS：

.porpre {
    float: left;
    position: relative;
}


.pHide {
    background-color: #fff;
    padding: 0px 0px;
    width: 580px;
    border: 2px solid #EFEFEF;
    height: auto !important;
    overflow: hidden;
    position: absolute;
    top: 42px;
    left: -460px;
    display: none;
    z-index: 999;
}

    .pHide ul {
        list-style: none;
        padding: 10px;
        padding-left: 17px;
        height: 55px;
    }

    .pHide li, .pHide li a {
        float: left;
        height: 32px;
        height: auto !important;
        min-height: 32px;
    }

    .pHide li {
        margin: 5px;
    }

        .pHide li.ma {
            margin-right: 0;
        }

        .pHide li a {
            color: #fff;
        }

执行的JS：

function btngroupClick(obj, event) {
    var top = $(obj).offset().top;
    var left = $(obj).offset().left;
    var x = event.clientX;
    var y = event.clientY;

    // $(obj).next().css('top', x + 'px').css('left', y + 'px');
    $(obj).parent().next().eq(0).toggle();
}