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

1、button可下拉弹出层：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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);" onclick="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();
}