开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap Accordion在Post back上关闭

Bootstrap Accordion是一种前端开发工具，用于创建可折叠的内容面板。它通过点击标题部分来切换内容的显示和隐藏。在Post back上关闭Accordion意味着在页面进行后台数据提交后，Accordion会保持关闭状态。

Accordion的优势在于它可以有效地组织和展示大量的内容，使页面更加清晰和易于浏览。它常用于FAQ页面、产品特点展示、帮助文档等需要展示大量内容的场景。

在使用Bootstrap Accordion时，可以使用JavaScript或jQuery来实现在Post back上关闭Accordion的功能。具体的实现方式如下：

首先，在页面加载完成后，通过JavaScript或jQuery选择Accordion的元素，并绑定一个事件监听器。
在事件监听器中，监听页面的Post back事件，当页面进行后台数据提交时触发。
在Post back事件触发时，使用JavaScript或jQuery的方法来关闭Accordion。可以通过修改Accordion的CSS类或样式来实现关闭效果。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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="#collapse1">Section 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        Content 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Content 2
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  // 监听Post back事件
  $(window).bind("beforeunload", function(){
    // 关闭Accordion
    $("#accordion .panel-collapse").removeClass("in");
  });
});
</script>

</body>
</html>

在上述示例代码中，我们使用了Bootstrap的CSS和JavaScript库，并创建了一个简单的Accordion。通过jQuery的$(window).bind("beforeunload", function(){})方法来监听页面的Post back事件，并在事件触发时关闭Accordion。具体来说，我们通过移除Accordion中的in类来实现关闭效果。

腾讯云相关产品中，可以使用腾讯云的云服务器（CVM）来部署和运行这样的前端应用。您可以在腾讯云官网的云服务器产品页面了解更多关于云服务器的信息和产品介绍。

相关搜索:accordion的响应选项卡-在accordion上切换关闭 Back-to-top在Bootstrap 4中不再有效 bootstrap 4 accordion在angular项目中动态加载 Bootstrap 4模式在ESC上未关闭 Bootstrap 5 Accordion在放置在折叠的div中时无法正常工作 Bootstrap accordion -不要关闭其他accordion，除非用户单击关闭 Bootstrap accordion在typescript中不工作 Bootstrap accordion在加载时跳到页面中心 bootstrap accordion数据切换在移动设备上不起作用 Bootstrap accordion面板在tablet/mobile中不会折叠

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后，发现这种方式给我们带来太多好处了。...具体来说，是需要添加这个：这可能是一些人支持Bootstrap的一个论点：在尽可能简化网络的时候，你不必太担心CSS，而只需在HTML中定义布局。...但是，正如下一个论点，元素和布局之间的耦合实际上是一个弱点，特别是涉及到灵活性的时候。布局更灵活如果你想要根据屏幕的大小来改变布局，比如当在移动设备上查看的时候，菜单移到最上面一行。...不再有12列限制这谈不上是一个严重的问题，但也经常对我造成困扰。因为Bootstrap的网格分为12列，如果想要5列布局，或者7列，9列，或任何不合计为12的列布局的时候，就非常不方便。...你可以想要多少网格就要多少网格，下面就是一个7列的网格：通过设定为完成，如下所示：现在确实已经有了破解Boostrap这个缺陷的方法，而且我也知道Bootstrap4也使用了Flexbox，但是仍然在测试中

2.2K6 0

BootStrap基础知识

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close...如果一次只要展示一个吐司，请将定位样式放在 .toast 上。当使用 autohide: false 时，必须增加一个关闭的按钮，让用户可以关闭吐司。...(移除 DOM 元素上储存的资料) getInstance 允许你取得与 DOM 元素关联之轮播范例的静态方法。 Bootstrap 提供了两个事件给予轮播使用。...导航(Navbar) 在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。...预设情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框。

2311 0

ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件

Data属性 VS 编程API Bootstrap提供了完全通过HTML标记的方式来使用插件，这意味着，你可以不写任何JavaScript代码，事实上这也是Bootstrap推荐的使用方式。...举个栗子，若要使Alert组件支持关闭功能，你可以通过添加data-dismiss="alert"属性到按钮(Botton)或者链接（A）元素上，如下代码所示： @using (Html.BeginForm("Delete", "Customers", FormMethod.Post...上添加data属性：data-dismiss="modal"可以实现对模态框的关闭，当然你也可以使用编程方式API来完成： <button type="button" class="btn btn-primary

5.1K6 0

使用formio和react实现在线表单设计

formiojs 是一个开源的在线表单设计工具，今天看看怎样在 react js 中使用 formiojs。...my-react-formio-app npm install @formio/react npm install @formio/js 另外，考虑样式等问题，还安装了下面几个依赖包 npm install bootstrap...npm install react18-json-view npm install react-bootstrap npm install font-awesome 创建组件这里创建一个简单的页面组件...在 src 下创建文件 MyBuilder.js，内容如下： import { FormBuilder, Form } from "@formio/react"; import { useState }.../MyBuilder'; import 'font-awesome/css/font-awesome.min.css'; import 'bootstrap/dist/css/bootstrap.min.css

1371 0

Jump Start Bootstrap 第4章

Bootstrap 官网地址原文出处 Bootstrap装饰插件 JavaScript是网页上事实上的脚本语言。...上一章，导航栏只包含一个简单的链接列表。在本节中，我们将使用一些Bootstrap的JavaScript插件帮助扩展我们网站现有组件的功能。...Bootstrap通过类”close”将按钮放置在警告消息的右上角。关闭按钮的解除动作靠data-dismiss属性来触发，由Bootstrap使用JavaScript实现。...在Bootstrap 3版本,modals已经变得有响应性;这意味着它们看起来很好，即使在小屏幕上也能运行良好。...Bootstrap模式对话框有一个选项，当单击该句柄时，将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。

28.3K4 0

开心档之bootstrap折叠

Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。...控制内容的隐藏与显示，需要在或元素上添加 data-toggle="collapse" 属性。...data-target="#id" 属性是对应折叠的内容注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 <a href="#demo" data-toggle...注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。...实例 <a class="card-link" data-toggle

6641 0

bootstrap5基本使用

前言 bootstrap5官方文档：https://getbootstrap.com/docs/5.1 bootstrap虽然没有Vue强大，但是对于新手快速建造精美的web有着非常大的帮助。...我觉得bootstrap5更像是一个组件库，对于小型网页来说非常的nice。组件库非常精美、简洁。而且上手很快。...导入 css导入 <link href="https://cdn.jsdelivr.net/npm/<em>bootstrap</em>@5.1.3/dist/css/<em>bootstrap</em>.min.css" rel="stylesheet...后加start、center、end，分别是顶部对齐，垂直居中，底部对齐 .align-self- 与上面的不同但相似，设置<em>在</em>column元素类中，单独对自身垂直方向对齐 <button class="accordion-button

3103 0

python测试开发django-188.Bootstrap折叠（Collapse）插件

/3.3.7/js/bootstrap.min.js"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#<em>accordion</em>...<em>在</em>可折叠元素实际显示或隐藏之前（即在or事件发生之前）返回给调用者。shown.bs.collapse, hidden.bs.collapse `.collapse('show') 显示可折叠元素。...<em>在</em>可折叠元素实际显示之前（即在事件发生之前）返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。...<em>在</em>可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse <em>Bootstrap</em> 的折叠类公开了一些用于挂钩折叠功能的事件。

2.9K5 0

Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ：1033553122 1....测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 2....--添加左侧菜单栏 --> <a data-toggle="collapse" class="nav-header collapsed" data-parent="#<em>accordion</em>...如果当前tab标签之前不存在tab标签，并且在其之后存在tab标签，则激活后一个tab标签页 li_active.next().find("a").click(); } } //关闭

7.8K2 0

3分钟搭建一个网站？腾讯云Serverless开发体验

/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"> <script src="https://cdn.bootcdn.net...上面说到的弊端，其实会带来一个很大的问题，就是沉没成本，当你花了很多时间<em>在</em>Serverless<em>上</em>，却发现有一些小的要求或者定制化，没法实现，这时你是去翻文档，提工单，还是选择老老实实买个虚机，自己手动重新部署呢...<em>在</em>最开始的Python3 Web模板中，在线的依赖库貌似缺失了新版本的feedparser和flask，导致我<em>在</em>本地调试能够运行的代码放到Serverless<em>上</em>各种不成功，但是错误信息却很难找。...当然，这个可能是我自己走得歪路，但是<em>在</em>页面上，很难一眼看出来Debug窗口在哪里。在用户体验<em>上</em>，还有很多事情可以做。总结不知不觉又是一篇2500字的文章，一个完整的周末又没有了。...不管怎么说，Serverless<em>在</em>成本的节省<em>上</em>是有目共睹的，我也希望<em>在</em>我的云服务器过期后，能够把自己的博客和其他服务，部署<em>在</em>Serverless<em>上</em>，能够节省一大笔开销。

1K4 0

3分钟搭建一个网站？腾讯云Serverless开发体验

/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"> <script src="https://cdn.bootcdn.net...上面说到的弊端，其实会带来一个很大的问题，就是沉没成本，当你花了很多时间<em>在</em>Serverless<em>上</em>，却发现有一些小的要求或者定制化，没法实现，这时你是去翻文档，提工单，还是选择老老实实买个虚机，自己手动重新部署呢...<em>在</em>最开始的Python3 Web模板中，在线的依赖库貌似缺失了新版本的feedparser和flask，导致我<em>在</em>本地调试能够运行的代码放到Serverless<em>上</em>各种不成功，但是错误信息却很难找。...当然，这个可能是我自己走得歪路，但是<em>在</em>页面上，很难一眼看出来Debug窗口在哪里。在用户体验<em>上</em>，还有很多事情可以做。总结不知不觉又是一篇2500字的文章，一个完整的周末又没有了。...不管怎么说，Serverless<em>在</em>成本的节省<em>上</em>是有目共睹的，我也希望<em>在</em>我的云服务器过期后，能够把自己的博客和其他服务，部署<em>在</em>Serverless<em>上</em>，能够节省一大笔开销。

6222 0

前端开发者都应知道的 jQuery 小技巧

，你无需插件便可创建一个简单地回到顶部动画： // Back to top $('a.top').click(function (e) { e.preventDefault(); $(document.body...-- Create an anchor tag --> Back to top 将 scrollTop 的值改为你想要 scrollbar 停止的地方...Hover 上的 Class 切换如果用户的鼠标悬停在页面上某个可点击元素时，你想要改变这个元素的视觉表现。...input 上再运行一次 prop 方法。...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function (

2.3K3 0

大学生圣诞网页设计制作成品圣诞节静态HTML网页作业作品简单DIV CSS布局网站

-- bootstrap-css --> Happy New Year <div class="<em>back</em>...'#horizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, <em>accordion</em>...', // Start closed if in <em>accordion</em> view activate: function(event) { // Callback function

1.2K2 0

10分钟完成一个在线RSS阅读器？腾讯云Serverless Web Function使用体验

它的大致执行流程如下图： [008i3skNly1gt1iekzah9j31mm0hajti.jpg] 所以，Serverless其实本质上是云服务上帮你整合了云资源，你只需要编写最核心的代码，比如一个请求过来如何处理和返回对应的数据.../ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"> <script src="https://cdn.bootcdn.net...上面说到的弊端，其实会带来一个很大的问题，就是沉没成本，当你花了很多时间<em>在</em>Serverless<em>上</em>，却发现有一些小的要求或者定制化，没法实现，这时你是去翻文档，提工单，还是选择老老实实买个虚机，自己手动重新部署呢...<em>在</em>最开始的Python3 Web模板中，在线的依赖库貌似缺失了新版本的feedparser和flask，导致我<em>在</em>本地调试能够运行的代码放到Serverless<em>上</em>各种不成功，但是错误信息却很难找。...不管怎么说，Serverless<em>在</em>成本的节省<em>上</em>是有目共睹的，我也希望<em>在</em>我的云服务器过期后，能够把自己的博客和其他服务，部署<em>在</em>Serverless<em>上</em>，能够节省一大笔开销。

1.1K0 0

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function...-- Create an anchor tag --> Back to top 改变scrollTop 的值可以更改你想要放置滚动条的位置。...5、悬停切换类假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。...这就要在阻止默认动作上做文章了： $('a.no-link').click(function (e) { e.preventDefault(); }); 8、淡入/滑动切换滑动和淡入都是我们用jQuery...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function (

3.9K6 0

带你走近AngularJS - 体验指令实例

使用AngularJS自定义指令结合以下HTML源码同样可以得到预期效果： BootStrap手风琴指令 <btst-accordion...Google Maps 指令在我们创建指令之前，我们需要添加Google APIs 引用到页面中： <!...function () { if (map && scope.center) map.setCenter(getLocation(scope.center)); }); 监测方法正如我们在文章开始时描述的...updateControl 方法实际上使用selected 选项创建了新的地图。 "zoom" 和 "center" 变量将被分别处理，因为我们不希望每次在用户选择或缩放地图时都重新创建地图。...更多指令链接为一些AngularJS 指令的在线实例: http://wijmo.gcpowertools.com.cn/demo/AngularExplorer/ ，你可以在例子的基础上进行练习。

2.4K5 0

Bootstrap学习文档（四）

这是 Bootstrap 中的一等 API，也应该是你的首选方式。话又说回来，在某些情况下可能需要将此功能关闭。...因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。...这是 Bootstrap 中的一等 API，也应该是你的首选方式。话又说回来，在某些情况下可能需要将此功能关闭。...因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。...因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。

3.6K2 0

每个程序员都会的 35 个 jQuery 小技巧

}); }); // how to use open link 检测浏览器注: 在版本....right")); }); }); 动态控制页面字体大小用户可以改变页面字体大小 $(document).ready(function() { // Reset the font size(back...// Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return...鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function ()

4.4K1 0

36·Python项目-博客(前后不分离)

当填写完用户名的时候，鼠标移动到下一个框的时候，用户名的框就失去焦点了，那么在失去焦点的时候，瞬间显示出，这个字段的校验错误信息。 <a role="button" data-toggle="collapse" data-parent="#<em>accordion</em>.../add_article.html') ---- 模板 <em>back</em>/backbase.html <!.../update_article.html {% extends '<em>back</em>/<em>back</em>_base.html' %} {% block home %} 修改文章

7801 0

AJAX控件UpdatePanel使用详解

它可以使得你的页面用户方便地展开或者关闭一系列页面元素的显示。它有点类似多个 CollapsiblePanels 控件的组合。...但是在一个时间内，它只能限制你的页面用户只能展开其中的一个部分，每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样...Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外，如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动...在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。...在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。

7915 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭