首页 > 代码库 > 【Bootstrap3.0建站笔记二】按钮可下拉弹出层
【Bootstrap3.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);" 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(); }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。