bootstrap点击展开

最新推荐文章于 2024-05-16 18:13:36 发布
原创 最新推荐文章于 2024-05-16 18:13:36 发布 · 567 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这是一个为大学生设计的闲置物品拍卖平台的管理界面代码，包括用户管理、拍卖管理、综合管理和投诉管理等模块，采用HTML、CSS和JavaScript实现。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/slide.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	<body>
		<div class="leftMeun" id="leftMeun">
			<div id="logoDiv">
				<p id="logoP"><font size="<3></3>" color="">大学生闲置物品拍卖平台</font></p>
			</div>
			<div id="personInfor">
				<p id="userName"></p>
				<p><span></span> <a href="http://www.mycodes.net/" target="_blank"></a></p>
				<p>
					<a>退出登录</a>
				</p>
			</div>
			<div class="meun-item" href="#char" data-toggle="collapse" data-target="#userManager" role="tab"><img src="images/icon_chara_grey.png">用户管理</div>
			<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
			<div id="userManager" class="panel-collapse collapse" role="tabpanel">
				<ul >
					<li class="meun-item" style="margin-top: -10px;">
						<!-- <button class="menu-item-left" data-target="test2.html">
							<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
						</button> -->
						<div class="meun-item" href="#char"style="margin-left: -12px;">认证审核</div>
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div href="#char" style="margin-left: -12px;">所有用户</div>	
					</li>
				</ul>
			</div>
			
			<div class="meun-item" href="#char" data-toggle="collapse" data-target="#acutionManager" role="tab" style="margin-top: -10px;"><img src="images/icon_chara_grey.png">拍卖管理</div>
			<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
			<div id="acutionManager" class="panel-collapse collapse" role="tabpanel">
				<ul>
					<li class="meun-item" style="margin-top: -10px;">
						<!-- <button class="menu-item-left" data-target="test2.html">
							<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
						</button> -->
						<div class="meun-item" href="#char" style="margin-left: -12px;">拍卖审核</div>
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">正在拍卖</div>	
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">流拍</div>	
					</li>
				</ul>
			</div>
			<div class="meun-item" href="#char" data-toggle="collapse" data-target="#generalManager" role="tab" style="margin-top: -10px;"><img src="images/icon_source.png">综合管理</div>
			<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
			<div id="generalManager" class="panel-collapse collapse" role="tabpanel">
				<ul>
					<li class="meun-item" style="margin-top: -10px;">
						<!-- <button class="menu-item-left" data-target="test2.html">
							<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
						</button> -->
						<div class="meun-item" href="#char" style="margin-left: -12px;">订单审核</div>
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">所有订单</div>	
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">分类管理</div>	
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">留言列表</div>	
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">回复列表</div>	
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">信誉管理</div>	
					</li>
				</ul>
			</div>
			<div class="meun-item" href="#char" data-toggle="collapse" data-target="#accuseManager" role="tab" style="margin-top: -10px;"><img src="images/icon_change_grey.png">投诉管理</div>
			<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
			<div id="accuseManager" class="panel-collapse collapse" role="tabpanel">
				<ul>
					<li class="meun-item" style="margin-top: -10px;">
						<!-- <button class="menu-item-left" data-target="test2.html">
							<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
						</button> -->
						<div class="meun-item" href="#char" style="margin-left: -12px;">未处理工单</div>
					</li>
					<li class="meun-item" style="margin-top: -10px;">
						<div class="meun-item" href="#char" style="margin-left: -12px;">已完成工单</div>	
					</li>
				</ul>
			</div>
		</div>
		
	</body>
</html>
bootstrap-treeview点击折叠后，再点击展开发现选中node没有反应
技术小鬼的博客
12-28 5073
最近在写前端页面的时候发现一个bug。 有页面采用了bootstrap-treeview插件，刚开始加载页面的时候是默认展开二级子节点的，并且选中结点后右边会做查询，但是当我点击折叠按钮后，再点击展开按钮后，子节点点击后就没有反应了，按钮的js代码如下：$('#treeviews').treeview({ levels : 99, data : json_data, nod
bootstrap中点击左边展开
weixin_33670786的博客
05-30 798
<div id="sideNav" href=""><i class="material-icons dp48 glyphicon-align-justify" ></i></div> 转载于:https://www.cnblogs.com/fpcbk/p/9111273.html
bootstrapTable treegrid 点击行展开
Orlando321的博客
04-21 2565
bootstrapTable: var toggle = {}; $("#table").bootstrapTable("destroy"); $("#table").bootstrapTable({ detailView: true, icons:{ detailOpen:"glyphicon glyphicon-chevron-up", de...
bootstrap垂直下拉菜单默认展开
weixin_33912246的博客
05-16 1274
HTML： <div class="col-md-3"> 　　<nav class="navbar"> 　　　　<div class="container-fluid"> 　　　　　　<div class="navbar-header common-border-bottom common-border-right common-border-le...
bootstrap-table表格点击行展开底部详情页
cm777的博客
05-16 735
本文编写了在使用bootstra-table组件时，点击行展示行详情页。
记录jsp使用bootstrapTable 点击展开子级页面
yang_weidong的博客
08-22 835
记录jsp使用bootstrapTable 点击展开子级页面
Bootstrap展开收缩显示表格json格式数据.zip
05-23
在本案例中，“Bootstrap展开收缩显示表格json格式数据.zip”是一个包含使用Bootstrap实现的、能够展开和收缩显示表格的示例项目，特别适用于处理JSON格式的数据。 首先，我们要理解Bootstrap的核心组件之一是栅格...
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
08-29
今天，我们将详细介绍 Bootstrap Table 中的 expandRow 和 collapseRow 方法，这两个方法可以用来展开或关闭当前行数据，提供了更多的灵活性和可扩展性。 expandRow 方法 expandRow 方法是一个用来展开当前行数据...
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
Bootstrap Treeview是一款基于Bootstrap框架的交互式树形视图组件，它使得在Web应用中展示层级数据变得简单直观。在官方版本中，虽然提供了丰富的功能，但并未直接支持动态加载或懒加载。动态加载（也称为懒加载）是...
jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip
11-01
本资源"jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip"正是利用了这些特性，为表格数据的展示提供了更丰富的交互体验。 首先，我们来详细解释这个功能的工作原理。在网页中的表格，尤其是包含大量信息的表格，...
bootstrap菜单展开收起_Bootstrap 折叠
weixin_30562025的博客
12-23 1830
Bootstrap 折叠描述在本教程中，将学习如何通过 Bootstarp 创建可折叠的组件。什么是必需的您必须引用 jquery.js 和 bootstrap-collapse.js - 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内。您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件。实例第一个实例演示如何不调...
bootstrap菜单展开收起_Bootstrap打造一个左侧折叠菜单的系统模板(一)
weixin_33582801的博客
12-23 1591
1. 前言最近需要做一个后台管理系统，我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。于是就打算完全依靠bootstrap搭建一个属于自己的模板。首先从左侧的折叠菜单开始。看图。2. CSS 代码以下是自定义的css代码，由于系统是内部使用，所以优先考虑chrome,firefox 不考虑IE了。#main-nav {margin-left: 1px;}#...
BootStrap2学习日记22---点击展开
weixin_30483495的博客
04-02 78
先看效果: Code： <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=...
bootstrap 导航菜单 折叠位置_下拉菜单的讲究
weixin_39646021的博客
11-29 377
下拉菜单是前端的常用组件之一，几乎所有前端组件库都提供这一组件。不知道大家有没有思考过如何实现一个下拉菜单，方法要尽量简单。我曾经用纯css实现过一个下拉菜单，思路就是利用overflow的属性，非常简单：<我对这个简洁优雅的实现甚为满意。直到有一天我用它弹出一个饿了么组件对话框……正常的菜单是这样的：正常下拉菜单点击菜单项“数据视图”出现弹窗，到这步一切正常。问题出现在对话框关闭的时候：无...
Bootstrap Collapse的使用
sxj的专栏
10-17 1383
（1）data-parent=“#accordion”：它指定的当前折叠框是在哪个下边，就是类似于分组，是指的在哪个分组下，该分组指定了ID（<div class=“panel-group” id=“accordion” ），只需要将这3个划分到同一个分组下，那么点击其中一个展开，另外两个才会折叠。其中最关键的是：data-parent=“#accordion”、aria-expanded=“true”、class=“panel-collapse collapse in”
bootstrap table 实现父子级数据且默认展开第一个
qq_48045360的博客
03-02 1585
bootstrap table 实现父子级数据且默认展开第一个
bootstrap菜单展开收起_菜单展开及收缩效果 bootstrap+jquery
weixin_32697149的博客
12-23 1215
//左侧菜单 Jquery slideUp/slideDownvar leftmenu = $(function() {$(".mymenu").click(function() {var mymenu = $(this.parentElement);$(".treeview-menu").slideUp("slow", function() {$(".active").toggleClass("...
Bootstrp.efi 与 BOOTx64.efi的区别，如何解除或保持opencore为BIOS第一启动项
MedeMede
12-03 5601
MyBlog: Bootstrp.efi 与 BOOTx64.efi的区别，如何解除或保持opencore为BIOS第一启动项 为了更加纯净的使用Windows，使用了rEFInd来引导Windows和opencore。但是当在BIOS中把rEFInd设为第一启动项之后，通过rEFInd启动opencore进入BigSur，再重启，opencore就变成了第一启动项。即使冷重启也是如此。 这个奇怪的现象促使我研究了一下opencore的启动保护问题。 Bootstrp.efi 与 BOOTx64.efi.
关于黑苹果引导opencore0.66及以上bootstrap目录更新说明
Deku博客
03-22 3582
关于黑苹果opencore0.66及以上bootstrap目录更新说明 在opencore 0.66起取消了bootstrap bootstrap 主要是起到一个自动保护oc引导始终作为第一启动项 在0.65我们可以通过propertree 编辑config.pilst Misc -> Security -> AllowNvramReset -> true Misc -> Security -> BootProtect -> None 重启，重置NVRAM，Re
bootstrap 折叠与展开
最新发布
03-18
### 使用 Bootstrap 实现折叠与展开效果 Bootstrap 提供了一个强大的 `collapse` 插件来实现折叠与展开的效果。通过简单的 HTML 和一些数据属性，可以轻松创建可折叠的内容区域。 #### 基本结构 以下是使用 `...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值