点击展开，再次点击折叠。

最新推荐文章于 2024-04-22 21:21:58 发布
最新推荐文章于 2024-04-22 21:21:58 发布
阅读量3.2k 收藏 7
点赞数 2
分类专栏： PHP HTML PHP Storm
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/104392670
版权
PHP 同时被 3 个专栏收录
106 篇文章 1 订阅
订阅专栏
PHP Storm
60 篇文章 0 订阅
订阅专栏
HTML
54 篇文章 1 订阅
订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 折叠（Collapse）插件方法</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>
</head>
<body>

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne">
					点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseTwo">
					点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseThree">
					点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseFour">
					点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
				</a>
			</h4>
		</div>
		<div id="collapseFour" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
				lomo.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () { $('#collapseFour').collapse({
		toggle: false
	})});
	$(function () { $('#collapseTwo').collapse('show')});
	$(function () { $('#collapseThree').collapse('toggle')});
	$(function () { $('#collapseOne').collapse('hide')});
</script>  

</body>
</html>

在这里插入图片描述

<!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>
</head>
<body>

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne">
					点击我进行展开，再次点击我进行折叠。第 1 部分
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseTwo">
					点击我进行展开，再次点击我进行折叠。第 2 部分
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseThree">
					点击我进行展开，再次点击我进行折叠。第 3 部分
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
		</div>
	</div>
</div>

</body>
</html>
新老农
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript实现点击展开和收起的功能(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 467
Javascript实现点击展开和收起的功能(附完整源码)
顶部点击展开层再次点击折叠(jquery)
12-10
顶部点击展开层再次点击折叠(jquery)
vue之点击“展开/收回”功能实现（两种情况）
m0_64054560的博客
02-16 5985
vue实现展开收回功能，两种情况简单应对，列表展开显示全部、部分数据展开收回，菜鸟版基础教程
html实现点击按钮时下方展开一句话
最新发布
Debug yourself!
04-22 863
在这个示例中，我们首先使用 CSS 将展开内容隐藏起来，然后使用一个按钮来触发展开效果。当点击按钮时，JavaScript 函数。你可以使用 HTML、CSS 和 JavaScript 来实现点击按钮时展开一句话的效果。被调用，它会切换展开内容的显示状态（从隐藏到显示，或者从显示到隐藏）。// JavaScript 函数，切换展开内容的显示状态。你可以根据需要修改展开内容的内容和样式以及按钮的外观。/* 隐藏展开内容 *//* 样式化按钮 */
Vue+Naive UI实现树形控件点击按钮全部展开或收起功能
L770515的博客
02-22 796
在项目中我们会用到一些树形控件进行数据操作等一系列使用逻辑。那么如果第一级树形数据多的话我们默认展开需要滚动，如果默认不展开想要查看子集又需要挨个点击。那么我们可以根据组件API的默认展开项来添加按钮进行这个处理。首先定义一个默认展开的变量，然后在树形控件中定义好。然后给按钮定义个方法操作默认展开项。这样简单的一个小功能就做好啦。
用javascript点击展开和关闭
withkai44的博客
12-02 660
toggle”函数使用“if”语句来检查内容DIV的“display”属性是否为“none”。如果是，“toggle”函数将设置其“display”属性为“block”，使其显示内容。否则，“toggle”函数将设置其“display”属性为“none”，隐藏其内容。在上面的代码中，我们首先使用“document.querySelector”来获取包含内容的DIV元素，并将其存储在变量“content”中。在这个页面中，我们将添加一个包含内容的DIV元素，以及一个可以展开和关闭内容的按钮。
js实现点击按钮控制展开与收起
企业级技术与网站app运营
05-21 1364
【代码】js实现点击按钮控制展开与收起。
CSS+JS点击展开/隐藏的折叠菜单特效代码
03-20
这个主题——"CSS+JS点击展开/隐藏的折叠菜单特效代码"——就是关于如何利用CSS（层叠样式表）和JavaScript来实现这种功能的。下面我们将详细探讨这两种技术在构建这种效果时的应用。 首先，CSS是网页设计中的样式...
jQuery页脚点击展开折叠弹窗特效代码
03-20
【jQuery页脚点击展开折叠弹窗特效代码】是一种常见的网页交互设计，主要应用于提升用户体验，让用户能够方便地访问或隐藏一些扩展信息。这种特效通常会在页面的底部左侧设置一个按钮或者链接，用户单击后，会弹出一...
jquery展开折叠插件特效代码
03-20
例如，给父级元素添加点击事件，通过判断子元素的状态来决定是展开还是折叠所有子元素。 此外，为了提高性能，可以考虑使用事件节流或防抖技术，防止在用户快速点击时执行过多的动画。 五、示例代码分析 在提供的...
vue-列表下详情的展开与折叠案例
10-15
3. **切换展开状态**：再次点击已展开的列表项，该列表项折叠；点击其他未展开的列表项，原本展开的列表项折叠，新点击的列表项展开。 ### 解决方式 1. **图标动画**：通过CSS实现展开折叠的动画效果。使用`...
网站栏目点击展开收缩效果.zip
05-23
网站栏目点击展开收缩效果是一款基于jQuery制作的网站栏目点击展开收缩效果代码，功能很实用，代码非常简单，适合栏目比较多的网站使用。
vue实现点击展开点击收起效果
08-27
主要介绍了vue实现点击展开,点击收起效果，首先我们需要定义data里面的数据，使用computed对data进行处理,需要的朋友可以参考下
点击展开全部
02-18
部分内容显示，部分隐藏，当点击展开全部内容后，控件往下挪显示所有内容，点击收起后恢复原位
点击展开的div
10-30
点击展开的div
让很多内容只显示一部分，然后点击展开显示全部
09-22
新闻内容，只显示部分，点击展开，可以显示全部新闻内容，点击收起，可以改变为只显示部分内容，通过JS截取字符串实现。
点击展开显示更多，点击收起部分隐藏（每一步附代码）
weixin_44028365的博客
09-13 3954
这几天在做表格的时候遇到这么一个问题，要求点击“更多”显示全部数据，点击“默认”只显示5条数据，先上图 展开前 展开后 思路就是把数据存在一个数组里面，然后用slice函数分割，分割后的函数放在新的数组里面，绑定到表格 第一步 ref是从后端请求到的数据，data是绑定到表格里的数据 borrowList存的是后端请求来的数据，borrowList1存的是绑定到表格的数据，数据定义在data里面 第二步 v-if条件判断，如果数据多于5条，才显示按钮 v-on绑定点击函数 brandfold1有t
html 点击展开显示全部,多行溢出省略号显示及点击展开（css/js）实现！
weixin_32825733的博客
06-01 4525
关于多行溢出显示省略号的问题，如果是根据字符的长度个数限制 超过部分替换为省略号，这种还是很好处理的，关键是根据行数，在未知情况下你不知道需要多少内容，去填满一个元素，做起来还是比较麻烦的，网上很多种乱七八糟的方案，拿过来又不能直接用，，我就结合网上的思路重新整理修改一波可以直接用的几种方案。一、单行溢出出现省略号显示：张艺兴张艺兴张艺兴张艺兴张艺兴样式：.p{width:1rem;overflo...
前端三级分类展示，点击展开，再次点击折叠
weixin_47127690的博客
05-19 1060
2）for 循环递归出来的这个数组， 找到上面定义的 data-openStatus 状态是 1的 ：是展开操作，并且判断下面是否有子集，并且根据给自己的属性，判断子集是否被展开或者收起。1）判断长度是否大于0，小于 0 证明没有子集，或者是三级分类，此时不做点开或者折叠操作，大于0，证明有子集，需要把 减号图标变成加号图标，同时给span 的属性更改。3.点击事件，点击以后获取相对应的 ID 和 ID下的所有子集，// 已经被收起来的二级, 需要记录三级的ID, 不做展示。// 操作当前被点击的内容。
展开折叠菜单
05-24
折叠菜单是一种常见的网页设计元素，可以使页面更加美观、简洁和易于导航。通常情况下，折叠菜单会显示一组选项...这个示例中，当用户点击“更多选项”时，子菜单会展开显示子选项1和子选项2，再次点击则会折叠子菜单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值