Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现
1) 需求
这周接到⼀个关于前端的任务，由于我是前端菜鸡，只能靠投机取巧来实现。需求描述：表格中最后⼀列的操作列中由于按钮太多，需要隐藏⼀部分。点击竖着排列的三个点（更多图标），弹出隐藏的按钮。完毕！
2) 实现思考
⼀般遇到这种不会的问题就是上⽹类似。⽆果，主要因为太菜。然后就到了⼀个bootstrap的插件，虽然背离了初衷的样式，但是差不多可以实现。使⽤插件的确⽐⾃⼰创作来的简单些。
3) 想象 VS 现实
这是要求的样式：
⽤bootstrap的dropdown实现：
js导航栏下拉菜单
如果按钮上⾯描述较多，会被屏幕限制，可以使⽤dropdown-menu-right控制显⽰到左侧即可。如果对样式细节有要求可以使⽤css微控。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 默认的导航栏</title>
<link rel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.table tbody tr td{
vertical-align: middle;
}
</style>
</head>
<body>
<br>
<div class="container">
<table class="table table-striped table-hover table-bordered text-center">
<thead>
<tr>
<th class="text-center">表头1</th>
<th class="text-center">表头2</th>
<th class="text-center">操作</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>表格11</td>
<td>表格12</td>
<td><i>
<ul class="nav navbar-nav">
<li class="dropdown">
<i href="#"class="tool- more1 dropdown-toggle"data-toggle="dropdown"aria-expanded="true" >
icon-box</i>
<ul class="dropdown-menu dropdown-menu-right" >
<li name="liModifyPlantBtn"id="liModifyPlantBtn" >
<a class="tool-icon-box tool-edit-active pl-big" title="修改产品平台"name="modifyPlantBtn "id="modifyPlantBtn">
查看详情
</a>
</li>
<li name="liRemovePlantBtn"id="liRemovePlantBtn" >
<a class="tool-icon-box tool-delete" title="删除产品平台"name="removePlantBtn"id="rem ovePlantBtn">
修改本⾏
</a>
</li>
<li name="liMultiplexPlantBtn"id="liMultiplexPlantBtn" >
<a class="tool-icon-box tool-reuse pl-big" title="复⽤技术平台"name="multiplexPlantBtn"i d="multiplexPlantBtn">
删除本⾏
</a>
</li>
</ul>
</li>
</ul>
</i>
</td>
</tr>
<tr>
<td>表格21</td>
<td>表格22</td>
<td><div class="btn-group">
<button data-toggle="dropdown"class="btn btn-primary dropdown-toggle">操作<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a href="#">详情</a>
</li>
<li><a href="#"class="font-bold">编辑</a>
</li>
<li><a href="#">删除</a>
</li>
</ul>
</div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。