bootstrap实现任务下拉栏

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量144 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justBeHerHero/article/details/115614475
版权

bootstrap实现任务下拉栏

1.截图

截图1
截图二

2.代码

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>

		<!--这里用的cdn, 加载需要联网，可换本地 bootstrap.min.css-->
	    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<!--同上-->
	    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

	    <style>

	    	.window{width: 500px;height:400px; overflow-y:scroll;}
	    	.window::-webkit-scrollbar{width:0px}/**webkit内核浏览器中有效(Chrome,Safari)**/
	        .leftMenu{margin:10px;margin-top:5px;}
	        .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}
	        .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
	        .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
	        
	    </style>
    </head>
    <body>
    	<div class="window panel panel-default">
    		<div class="panel-heading">任务栏</div>
            <div class="table-responsive" role="tablist">
                <div class="panel panel-primary leftMenu">
                    <!-- 利用data-target指定要折叠的分组列表 -->
                    <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                        <h4 class="panel-title">
                            分组1
                            <span class="glyphicon glyphicon-chevron-up right"></span>
                        </h4>
                    </div>
                    <!-- .panel-collapse和.collapse标明折叠元素 .in表示显示出来 -->
                    <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel">
                        <ul class="list-group">
                          <li class="list-group-item">
                            <!-- 利用data-target指定URL,可实现跳转-->
                            <button class="menu-item-left" data-target="path.html">
                                <span style="font-size: 16px;">分组项1-1</span>
                                 <span class="label label-default">done</span>
                            </button>
                          </li>
                          <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项1-1  </span>
                                <span class="label label-danger">New</span>
                            </button>
                          </li>
                          <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项1-2</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                           <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项1-2</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                           <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项1-2</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                        </ul>
                    </div>
                </div><!--panel end-->

                <div class="panel panel-primary leftMenu">
                    <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                        <h4 class="panel-title">
                            分组2
                            <span class="glyphicon glyphicon-chevron-down right"></span>
                        </h4>
                    </div>
                    <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                        <ul class="list-group">
                          <li class="list-group-item">
                            <!-- 利用data-target指定URL -->
                            <button class="menu-item-left" data-target="test2.html">
                                <span style="font-size: 16px;">分组项2-1</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                          <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项2-2</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                          <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项2-3</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                          <li class="list-group-item">
                            <button class="menu-item-left">
                                <span style="font-size: 16px;">分组项2-4</span>
                                <span class="glyphicon glyphicon-lock"></span>
                            </button>
                          </li>
                        </ul>
                    </div>
                </div>  
 
            
	    <script type="text/javascript">
	    $(function(){
	        $(".panel-heading").click(function(e){
	            /*切换折叠指示图标*/
	            $(this).find("span").toggleClass("glyphicon-chevron-down");
	            $(this).find("span").toggleClass("glyphicon-chevron-up");
	            //点击元素的id
	            let id=e.currentTarget.id;
	            if(id==='collapseListGroupHeading1'){
	            	$('#collapseListGroup1').toggleClass("in");
	            }else if(id==='collapseListGroupHeading2'){
	            	$('#collapseListGroup2').toggleClass("in");
	            }
	        });

	        $(".list-group-item").click(function(e){
	        	console.log(e);
	        	alert("做一些事");
	        })
	    });
	    </script>
    </body>

</html>
羊飘
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现bootStrap中的下拉列表功能
sensible_xzl的博客
11-13 774
为什么不选择直接官网复制粘贴： 如果每次都只是照搬官网的东西，而不去了解它的原理的话，是无法创建属于自己的下拉列表的，只能使用官网上的单一样式，所以为了能灵活应用它，我们需要对bootStrap中的代码做一些了解 步骤：为什么不选择直接官网复制粘贴：1.在html中导入相关的css、js文件2.原理剖析3.编写代码 1.在html中导入相关的css、js文件 首先罗列我我们需要的文件都有哪些？ bootStrap.css、bootStrap.js、jquery.js 将其导入HTML中 <head&
bootstrap的概要介绍与分析
06-09
5. **强大的JavaScript插件**：Bootstrap自带一系列强大的JavaScript插件，用于实现诸如模态对话框、下拉菜单、轮播、警告提示等动态交互效果。这些插件大大简化了前端开发中的复杂JavaScript编程任务。 6. **广泛...
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
程序员大阳
02-28 3812
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结 1. 概述 下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。 Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下
Bootstrap布局 菜单栏+选项卡
PSW_CSDN的博客
12-06 2113
Bootstrap布局: 菜单+选项卡组合
详解bootstrap自定义侧边导航栏的方法
qq_43067585的博客
04-09 4347
本篇文章给大家介绍一下bootstrap自定义侧边导航栏的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优缺点也十分明显，有的官网首页为了仅仅实现一个侧滑的效果，用了owl.carousel滑屏的插件，个人觉得小题大做了。这个bootstrap
bootstrap实现菜单栏
enthan809882的博客
10-27 2112
代码： <div> <!-- 侧边栏标签页 --> <ul class="nav nav-pills nav-stacked"> <!-- 侧边栏选项 --> <li role="presentation" class="active"> <!-- 选项控制data-target对应的显隐 --> ...
Bootstrap v3.3.7 中文文档
12-22
- 下拉菜单：用于导航栏中的下拉列表。 - 折叠内容：实现 accordions 和 tabs 等折叠效果。 - 滚动监听：自动滚动到页面顶部或底部的锚链接。 - 轮播：创建滑动图片展示。 - 提示和工具提示：用于显示简短的...
工具栏上设置下拉按钮
11-26
总之，设置工具栏上的下拉按钮是一项实用且常见的任务，它可以帮助优化用户界面，提高用户操作的便捷性。无论你是使用Java、HTML还是其他编程语言，都有相应的工具和库可以支持。设计时，始终关注用户体验，确保按钮...
bootstrap-adventure
04-12
在"bootstrap-adventure"中，你将学习如何使用Bootstrap的导航组件，如导航栏（`.navbar`）、下拉菜单（`.dropdown`）和面包屑导航（`.breadcrumb`）。这些组件使得网站的导航更加直观且易于使用，尤其在移动设备上...
bootstrap的一个模板，很强大，分享给大家
12-20
bootstrap很强大的一个前端框架。很漂亮，比ui强大的多。
彩色漂亮bootstrap后台模板
06-01
而组件化设计则允许开发者快速构建常见的UI元素，如导航栏、按钮、表单、下拉菜单、警告提示等，极大地提高了开发效率。 这个"彩色漂亮bootstrap后台模板"可能包含以下部分： 1. **导航栏**：通常包含品牌标识、...
Bootstrap Table使用整理（四）-工具栏
热门推荐
天马3798
06-08 2万+
一、启用默认支持的工具栏 /* * data-search 是否显示搜索框 * data-show-refresh 是否像是刷新按钮,注：刷新操作会重新请求数据，并带着请求参数 * data-show-toggle 是否显示面板切换按钮 * data-show-columns 是否显示列控制按钮 */ $('#table1').bootstrapTable({ columns: [
Bootstrap 固定导航条
歪脖先生的博客
03-09 2万+
固定导航条默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动而消失。也可以改变它的定位方式，让它固定显示在浏览器窗口的顶部或底部。1、固定在顶部如果想让导航条固定在页面顶部，只需在 .navbar 类后面追加一个 .navbar-fixed-top 类即可。如：&lt;div class="navbar navbar-fixed-top"&g...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 503
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 172
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 197
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 566
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
如何用bootstrap实现导航栏下拉菜单
06-07
要使用 Bootstrap 实现导航栏下拉菜单，你可以按照下面的步骤进行操作： 1. 在网页中引入 Bootstrap 的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 2. 在网页中添加一个导航栏，其中包含一个下拉菜单。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </li> </ul> </div> </nav> ``` 3. 在下拉菜单的父元素 `li` 上添加 `dropdown` 类，再添加一个 `dropdown-toggle` 类的链接元素，用于触发下拉菜单的显示和隐藏。 4. 在下拉菜单的子元素 `ul` 上添加 `dropdown-menu` 类。 通过以上步骤，你就可以使用 Bootstrap 实现导航栏下拉菜单了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值