Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现

最新推荐文章于 2024-07-01 09:10:14 发布

谛蕴

最新推荐文章于 2024-07-01 09:10:14 发布

阅读量2.8k

点赞数 1

文章标签：操作按钮隐藏三个点 dropdown

本文链接：https://blog.csdn.net/weixin_38201175/article/details/103295925

版权

1) 需求

这周接到一个关于前端的任务，由于我是前端菜鸡，只能靠投机取巧来实现。需求描述：表格中最后一列的操作列中由于按钮太多，需要隐藏一部分。点击竖着排列的三个点（更多图标），弹出隐藏的按钮。完毕！

2) 实现思考

一般遇到这种不会的问题就是上网找类似。无果，主要因为太菜。然后就找到了一个bootstrap的插件，虽然背离了初衷的样式，但是差不多可以实现。使用插件的确比自己创作来的简单些。

3) 想象 VS 现实

这是要求的样式：
在这里插入图片描述
用bootstrap的dropdown实现：

如果按钮上面描述较多，会被屏幕限制，可以使用dropdown-menu-right控制显示到左侧即可。如果对样式细节有要求可以使用css微控。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的导航栏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/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 style="width: 360px;vertical-align: middle;" 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>
            </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" style="min-width:30px">
                                    icon-box</i>
                                    <ul class="dropdown-menu dropdown-menu-right" style="display:block;text-align:center;border:none; min-width:110px">
                                        <li name="liModifyPlantBtn" id="liModifyPlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-edit-active pl-big" style="font-style: normal;width:100%" title="修改产品平台" name="modifyPlantBtn" id="modifyPlantBtn">
                                                查看详情
                                            </a>
                                        </li>
                                        <li name="liRemovePlantBtn" id="liRemovePlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-delete" style="font-style: normal;width:100%" title="删除产品平台" name="removePlantBtn" id="removePlantBtn">
                                                修改本行
                                            </a>
                                        </li>
                                        <li name="liMultiplexPlantBtn" id="liMultiplexPlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-reuse pl-big" style="font-style: normal;width:100%" title="复用技术平台" name="multiplexPlantBtn" id="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" style="display: block;">
                                <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>

谛蕴

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现

Bootstrap下拉菜单（Dropdown）插件实现隐藏操作按钮的简单实现1) 接到任务2) 实现过程3) 想象 VS 现实1) 接到任务这周接到一个关于前端的任务，由于我是前端菜鸡，只能靠投机取巧来实现。需求描述：表格中最后一列的操作列中由于按钮太多，需要隐藏一部分。点击竖着排列的三个点（更多图标），弹出隐藏的按钮。完毕！2) 实现过程一般遇到这种不会的问题就是上网找类似。无果，主要因...
复制链接

扫一扫