- 综合排序
- 最热优先
- 最新优先
- 来自专栏sktj
bootstrap collapse
class="panel panel-default">
73010发布于 2019-07-07Bootstrap 折叠（Collapse）插件
用法 下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class： Class 描述 实例 .collapse 隐藏内容。 尝试一下 .collapse.in 显示内容。 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示： $('.collapse').collapse() 选项 有一些选项是通过 data 属性或 JavaScript $('#identifier').collapse({ toggle: false }) Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素。 $('#identifier').collapse('toggle') Show: .collapse('show') 显示可折叠元素。 $('#identifier').collapse('show') Hide: .collapse('hide') 隐藏可折叠元素。
19210编辑于 2025-12-17来自专栏cnblogsBootstrap源码分析之nav、collapse
rounded corners here since there is a hard edge above the menu @include border-top-radius(0); } 折叠效果(collapse )： 源码文件： Mixins/_component-animations.scss：collapse实现，实现折叠效果 Javascripts/bootstrap/collapse.js：折叠效果实现 1、$this.data()收集所有data-*数据 2、Parent属性：指定当前这个collapse被那个父级所控制，主要实现一控多的效果，以下是隐藏同一父级下所有子列表代码： return $(this.options.parent) .find('[data-toggle="collapse"][data-parent="' + this.options.parent + ' ） $(“p”).find(‘.bak’).find(‘span’).end()：还原到$(“p”) 5、scrollHeight：页面的高度（获取为要展开的实际高度/宽度），包含视窗不可见的部分，在collapse
2K80发布于 2018-01-17来自专栏韩曙亮的移动开发专栏【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )
blue; } 设置完上述样式后 , 表格显示如下 : 上述 单元格 与 单元格 之间 的边框 , 单元格 与 表格 之间 的边框 , 出现了重叠 , 每个重叠处都有 两条线 ; 设置 border-collapse : collapse; CSS 样式 , 可以 将 相邻的边框 合并在一起 , 合并边框后的效果 : 3、完整代码示例 完整代码示例 : <! target="_blank"/> <style> table, th, td { border: 1px solid blue; /* 相邻边框合并在一起 */ border-collapse : collapse; } </style> </head> <body> <!
4.5K20编辑于 2023-03-30来自专栏用户7873631的专栏详解： 25 最难点： border-collapse: separate;
table代表这是一个表格 tr标签代表整个表格中的一行数据，只要一行都是属于他的，无论多长多一样 td代表单元格 border-collapse: separate;核心是为外边距合并起来，要设置在 } #container .table { border: 5px solid red; border-collapse
76510发布于 2020-10-28来自专栏szhshp 的第四边境中转站Bootstrap3.Collapse.Expandable Table
关于Collapse状态按钮图标 注意 以前写过一篇 collapse 的简单应用： Bootstrap.Collapse 这次还用到了 Expandable Table 和 Glyphicons 图标 Bootstrap 3 甚至是 mini ver 都包含了以下插件相关的 js 用例 (html 代码，防止被解析请清除 start tag 里面的空格) < tr data-toggle="<em>collapse</em> " aria-expanded="false"> …… </ tr> 几个要点： 响应部分 设置data-toggle="collapse" 设置 href 的值为对应被响应部分的选择器字串 被响应部分 设置class="collapse" aria-expanded="false" 使其能够被响应部分的 href 选择器选中即可 关于 Collapse 状态按钮图标 这里使用的是通过 效果一段时间过渡，onclick 事件完成过快可能导致 collapse 效果和按钮变化不同步（多次点击可能出现显示错误，因为 collapse 太慢了 o(` · ~ · ′。)
1.1K30编辑于 2022-09-21来自专栏喇叭的学堂vue使用elementui的el-menu的折叠菜单collapse
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制，我用事件总线bus进行是否折叠传递 参数 说明 类型 可选值 默认值 collapse 是否水平折叠收起菜单（仅在 mode background-color="#001529" text-color="#fff" active-text-color="#1378e6" :unique-opened="true" :collapse template> <script> export default { name: "Menu", data() { return { // 在 el-menu 中绑定 :collapse }); }, }; </script> <style scoped> /* 设置展开宽度，不至于收缩出现bug */ .el-menu-vertical-demo:not(.el-menu--collapse
2K10编辑于 2024-03-11来自专栏设计模式elasticsearch去重：collapse、cardinality、terms+top_hits实现总结
一 、collapse折叠去重 elasticsearch中的collapse功能允许用户对搜索结果进行分组，这在某些情况下可以看作是一种去重操作。 原理 collapse功能基于一个或多个字段的值对搜索结果进行分组。当你指定了collapse参数后，Elasticsearch会在后台对匹配的文档进行分组，并且每个分组只会返回一个代表文档。 在使用collapse时，请务必考虑这些限制和注意事项，以确保查询的准确性和性能。通过合理规划和优化查询，可以充分利用collapse的分组功能，同时避免潜在的性能瓶颈。 使用collapse功能 原理：collapse功能通过指定一个字段来对搜索结果进行分组，并且每组只返回一个最佳匹配的文档（通常是基于排序字段的最高或最低值）。 灵活性：相对较低。 而collapse则更简单直接，只基于一个字段进行分组。 性能：对于大数据集，collapse可能更高效，因为它避免了复杂的聚合计算。然而，实际性能还取决于具体的使用场景和数据分布。
6K10编辑于 2024-07-01来自专栏从零开始学自动化测试python测试开发django-188.Bootstrap折叠（Collapse）插件
前言 折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。 单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容 <! collapse() .collapse(options) 将您的内容激活为可折叠元素。 shown.bs.collapse, hidden.bs.collapse `.collapse('show') 显示可折叠元素。在可折叠元素实际显示之前（即在事件发生之前）返回给调用者。 shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。在可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。
4K50编辑于 2022-03-10来自专栏Bug EngineerBootstrap Collapse（手风琴）插件添加加减号、三角形图标
折叠（Collapse）插件也叫手风琴插件，是一个页面中常用的组件 通常我们会需要 “+” “-” “▷”等符号对其进行装饰，默认“+”，展开后变为“-”号，转换三角形的角度等 实现的方法有很多种 ，下边介绍下我使用的方法 下表列出了折叠（Collapse）插件中要用到的事件。 $(document).ready(function() { //点击折叠时运行该函数 $('.panel').on('hide.bs.collapse show.bs.collapse', function (e) { var $this = $(this) $this.find("span
61910编辑于 2023-12-25来自专栏Coco的专栏由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）
： 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse 但是更深一步去讨论，牵扯出诸如上文提到的normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，又有多少人能很好的回答完整呢 即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。
1.5K50发布于 2018-05-28来自专栏sktjjquery 手风琴效果
<div class="panel-body ').prev('.panel-heading').addClass('active'); $('#accordion, #bs-<em>collapse</em>') .on('show.bs.<em>collapse</em>3.7K20发布于 2019-08-23collapse //collapse in $('.collapse').collapse() image.png image.png <div class 第 1 部分--hide 方法来自专栏sktjbootstrap 折叠
<div 第 2 部分--show 方法<div class 第 3 部分--toggle 方法<div 第 4 部分--options 方法<div2.7K20发布于 2019-07-05来自专栏R语言数据分析指南跟着Microbiome学绘图(1) 个性化组合进化树与热图
(174, 'min', fill="#E41A1C") %>% collapse(173, 'max', fill="#1E90FF") %>% collapse(146, 'mix', fill="#FF8C00") %>% collapse(141, 'mixed', fill="#4C005C") %>% collapse(155, 'min', fill="#003380 ") %>% collapse(154, 'min', fill="#FF8C00") %>% collapse(155, 'min', fill="#FF8C00") %>% collapse (152, 'mixed', fill="#740AFF") %>% collapse(151, 'min', fill="#FF8C00") %>% collapse(150, 'min', ") %>% collapse(159, 'min', fill="#0075DC") %>% collapse(158, 'min', fill="#00FFFF") %>% collapse
92410编辑于 2022-09-21来自专栏编程时光腾讯面试官：如何从0到1实现一个高性能Collapse折叠组件，直到现在我还实现不出来
现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 大家好，我是linwu,之前面腾讯某个部门的时候，面试官曾经给了我一道手写题，题目大概就是从0到1实现一个Collapse 组件 我们创建一个基础的Collapse组件。 ; }; export default Collapse; 拓展Collapse组件其它属性 accordion：如果设置为true，我们将启用手风琴模式。 我们创建一个名为Collapse.Panel的子组件来支持这些新的属性。 Collapse; forceRender属性 我们要添加一个名为forceRender的属性。
1.8K20编辑于 2023-07-27来自专栏小鑫同学编程历险记LogicFlow 自定义可分组拖拽面板
我选择使用 Quarkc 对 Quarkd 中 collapse 组件的源码提前开发一个适用于 PC 端的折叠组件. PS: 折叠组件位于项目 (src/extension/px-collapse.js) 目录. /px-collapse"; 调整 setPatternItems 函数的数据结构, 使其支持 collapse 组件; type GroupItem = { group: string; items ("px-collapse"); collapse.setAttribute("title", groupName); return collapse; } 最后调整 render 方法, 将每一组的节点都添加到对应的 "; // 第一步: collapse 组件添加 div 内容容器, 并设置 className, 方便调整样式; collapse.appendChild(container);
1.4K10编辑于 2024-03-01</body> <来自专栏跟牛老师一起学WEBGISArcgis for JS之地图自适应调整
float: left; width:200px; background: #014CC9; } .collapse_btn absolute; top: 50%; left: 0px; z-index: 99; } .collapse_btn_a 36.0473, map.spatialReference); map.centerAndZoom(mapCenter,4); on(dom.byId("collapse_btn "), "click", function(){ var collapseState = $("#collapse_btn").html(); "> 《
5.4K20发布于 2018-10-23来自专栏田小檬博客Docker镜像
HomeAssistant（智能家居） [collapse status="false" title="查看详情：HomeAssistant（智能家居）"]拉取镜像 docker pull homeassistant Shanghai" -v /PATH_TO_YOUR_CONFIG:/config --net=host homeassistant/home-assistant:latest centos7.x [collapse status="false" title="查看详情：可道云"] 拉取镜像 docker pull kodcloud/kodbox ---- 网心云 [collapse status="false" ] 阿里云盘挂载 [collapse status="false" title="查看详情：阿里云盘挂载"] 拉取镜像 docker pull zx5253/webdav-aliyundriver 运行容器 --name verysync -d -v /www/wwwroot/:/data -p 8886:8886 jonnyan404/verysync [/collapse] 内网穿透工具NPS [collapse
1.4K20编辑于 2022-08-30来自专栏awaitjava知识结构图跟ThinkinJava pdf文件
{collapse-item label="java知识结构图" open} {/collapse-item} {collapse-item label="java知识结构图1"} {/collapse-item } {collapse-item label="java知识结构图2"} {/collapse-item} {collapse-item label="java知识结构图5"} {/collapse-item
44730发布于 2021-09-09来自专栏iOS开发大全开心档之bootstrap折叠
实例 <button data-toggle="<em>collapse</em>" data-target="#demo">折叠</button>
实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ; 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle="collapse" 属性。 ">CollapsibleLorem ipsum dolor text....默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示: 实例Lorem ipsum dolor1.1K10编辑于 2023-05-09腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号