引用Jquery和bootstrap实现折叠效果

最新推荐文章于 2024-04-20 11:59:15 发布
最新推荐文章于 2024-04-20 11:59:15 发布
阅读量402 收藏 2
点赞数 2
分类专栏： dw 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540198/article/details/86548554
版权 
开发工具与关键技术：DW
作者：Mr.Feng
撰写时间：2019年1月19日

下面是引用Jquery和bootstrap来实现的点击按钮内容的折叠效果
下面的btn btn-primary为按钮的样式，collapse为点击按钮内容的隐藏与显示

在这里插入图片描述
在这里插入图片描述
点击测试一按钮
在这里插入图片描述
点击测试二按钮
在这里插入图片描述
再点一次的话就会有收起隐藏效果

冯超、
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
BootStrap折叠
秋城落叶的博客
03-31 330
Bootstrap折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来,创建折叠导航还是内容面板、允许很多内容选项 单击按钮以通过类更改显示和隐藏另一个元素 基本折叠: .collapse隐藏内容 .collapsing当过渡效果开始时被添加，当过渡效果完成时被移除 .collapse.in显示内容 通过data 属性:向元素添加d...
bootstrap+jquery+css折叠菜单 收缩菜单 效果（只有两级菜单）
热门推荐
bkuangb的博客
08-17 1万+
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
bootstrap实现多行折叠
路人甲的博客
05-11 4281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http
bootstrap中jquery插件——collapse折叠效果-手风琴效果
陈雪珊的博客
03-24 3152
先来掌握collapse插件的基本用法，再慢慢深入实例。 collapse最基本的效果是像下图所示的，点击按钮可以显示/隐藏下面的元素： 实现代码如下：<a class="btn btn-success" href="#collapseTest" data-toggle="collapse">Link with href</a> //a标签触发折叠效果 <button class="b
Bootstrap 5 保姆级教程（九）：折叠 & 导航
最新发布
Flag少侠的博客
04-20 1771
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。和是用于定义组件行为和目标元素的自定义数据属性。"collapse""modal""tab"以下实例中，当按钮被点击时，data-bs-toggle="collapse" 属性触发了折叠菜单的行为，data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的 元素。
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
jQuery+Bootstrap手风琴折叠菜单代码
06-05
本项目是关于创建一个"jQuery+Bootstrap手风琴折叠菜单代码"的实现，这种菜单通常被称为"手风琴菜单"，因为它在展开和折叠时具有类似手风琴的动态效果。 首先，jQuery是一个轻量级的JavaScript库，它提供了丰富的...
jQuery+Bootstrap手风琴折叠菜单代码.zip
09-23
《jQuery与Bootstrap结合实现的手风琴折叠菜单》 在网页设计和开发中，交互性和用户体验是至关重要的元素。jQuery和Bootstrap这两个强大的工具在这方面发挥了巨大作用。本教程将深入讲解如何利用jQuery与Bootstrap...
基于jQuery和Bootstrap3实现隐藏侧边栏菜单特效.zip
11-21
在本项目中，“基于jQuery和Bootstrap3实现隐藏侧边栏菜单特效.zip”是一个包含资源的压缩包，旨在帮助开发者创建一个具有隐藏侧边栏菜单效果的网页。这个效果通常是响应式的，适合移动设备和桌面设备的用户体验。让...
基于jQuery和Bootstrap的垂直手风琴下拉菜单
09-01
jQuery用于处理用户交互，而Bootstrap的JavaScript插件则负责实现下拉菜单和手风琴的动画效果。 然后，我们编写jQuery代码来监听下拉菜单的点击事件。当用户点击一个菜单项时，对应的子菜单应该展开或关闭。这可以...
树状菜单（利用映射-bootstrap+jQuery实现折叠功能）
02-11
bootstrap+jQuery实现树状菜单（可折叠）-----映射思维
Bootstrap折叠效果
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-05 3145
Bootstrap折叠效果 声明式用法 1.新建一个web项目ch27，将ch26里面bootstrap所要用到的css、JavaScript文件等复制到ch27。 2.声明式用法实例   //data-toggle="collapse" 用来触发JavaScript插件。 //给这个加
4.9Bootstrap学习js插件篇之折叠
为者常成，行者常至
05-07 7748
关于 对为支持折叠功能的组件，例如accordions和导航，赋予基本样式和灵活的支持。 插件依赖 折叠插件依赖过渡效果插件。 案例 使用折叠插件，通过扩展panel组件从而构建了一个简单的accordion组件。 Collapsible Group Item #1 Anim pariatur cliche reprehende
bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽采坑之旅
weixin_33177758的博客
12-24 356
戳蓝字「前端技术优选」关注我们哦！本文首发于政采云前端团队博客：纯 JS 实现放大缩小拖拽采坑之旅https://www.zoo.team/article/scaling前言最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交...
JQuery切换点击效果（demo：bootstrap折叠模块切换至可同时展开）
aozhou9334的博客
05-14 405
前几天在用BootStrap的时候用到了其中的一个“折叠”模块，就是这个 快写（抄）完的时候突然发现一个问题，如果阅读者希望能够同时展开所有折叠框？如果一会又想切回来每次只一个？ 先来看一下用比较呆的方法做的（jQuery） <div> <h3>标题一</h3> <p>展示文本一</p...
BootStrap实现响应式布局导航栏自动折叠隐藏效果
04-02
Bootstrap的响应式布局导航栏自动折叠隐藏效果可以通过以下步骤来实现： 1. 在HTML文件中添加导航栏代码，使用Bootstrap提供的样式类实现基本的导航栏布局。 2. 使用Bootstrap提供的“navbar-toggle”样式类，创建一个按钮，用于在小屏幕设备下展开或者收起导航栏。 3. 使用Bootstrap提供的“collapse”样式类，来实现导航栏内容的自动折叠隐藏。在按钮上添加“data-target”属性和“#navbar-collapse”值，来指定需要折叠的导航栏内容。 4. 使用Bootstrap提供的JavaScript库，实现导航栏按钮的点击事件，使得点击按钮后可以展开或者收起导航栏内容。 下面是一个实现响应式布局导航栏自动折叠隐藏效果的示例代码： ``` <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> ``` 在上述示例代码中，“navbar-toggle”样式类创建了一个按钮，用于在小屏幕设备下展开或者收起导航栏。使用“collapse”样式类实现导航栏内容的自动折叠隐藏，并在按钮上添加“data-target”属性和“#navbar-collapse”值，来指定需要折叠的导航栏内容。 需要注意的是，为了使JavaScript库正常工作，需要在页面中引入Bootstrap提供的jQuery库和Bootstrap的JavaScript插件库。在HTML文件的底部添加以下代码，即可引入这两个库： ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 通过上述步骤，即可实现Bootstrap的响应式布局导航栏自动折叠隐藏效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值