展开/折叠所有手风琴
手风琴（Accordion）是一种常见的用户界面组件，用于在网页或应用程序中实现可折叠的内容区域。它通常由多个折叠面板组成，每个面板包含一个标题和一个可展开/折叠的内容区域。
手风琴的主要作用是在有限的空间内展示大量的内容，并提供用户友好的交互方式。通过点击标题，用户可以展开或折叠相应的内容区域，以便更好地组织和浏览信息。
手风琴在各种网页和应用程序中都有广泛的应用场景，例如常见的FAQ页面、产品特性展示、帮助文档、设置面板等。它可以有效地减少页面的混乱感，提高用户体验和导航效率。
腾讯云提供了一款名为“云服务器 CVM”的产品，它是一种灵活可扩展的云计算基础设施服务。云服务器 CVM 提供了多种规格和配置选项，适用于不同规模和需求的应用场景。您可以通过以下链接了解更多关于腾讯云服务器 CVM 的信息：
https://cloud.tencent.com/product/cvm
请注意，以上答案仅供参考，具体的产品选择和推荐应根据实际需求和情况进行评估。
相关·内容
我正在一个移动网站上工作，并使用jquerymobile。手风琴里有四个可折叠的东西。我想要一个项目保持扩展。如果单击展开项，它将被折叠(我不想折叠此项)。如果我单击任何其他折叠项，则最后一个展开项将被折叠(没关系)。
我会感谢你的帮助。手风琴类别的动态javascript代码如下所示：
function create-accordion(categories)
{
category_array = categories;
jQuery.each(categories, function( index, value )
{
浏览 5提问于2013-11-15得票数 2
回答已采纳
我想在默认情况下折叠手风琴中的所有面板。对我来说，第一个面板总是处于活动状态。
各位能建议一下如何解决这个问题吗？
浏览 0提问于2011-10-15得票数 3
回答已采纳
我有一个带有手风琴的网页(jquery ui)，这个手风琴的每个折叠都有一个灵活的表格。当我加载网页时，所有的FlexGrid表都被加载了，即使我只是在折叠的折叠中显示其中的一个。
我只需要加载一个FlexGrid一次，而且，每个文件夹必须有一个不同的网址的FlexGrid表，我如何才能做到这一点？有没有办法动态地改变一个flexigrid表的url (我的意思是在执行时)？
浏览 1提问于2013-03-18得票数 0
回答已采纳
2回答
在web上使用ASP.NET 2.0 C#。在我的站点中，我有三个div，每个div包含几个元素。当我鼠标悬停一个div然后它垂直扩展，最初，所有的div都是可折叠的。如何编写此鼠标悬停事件。如何将所有div内容设置为可折叠。我想要手风琴，但是手风琴头是垂直的，而不是水平的。
浏览 11提问于2009-12-17得票数 0
回答已采纳
在我的项目中，我使用作为一个树菜单。当用户展开一个节点时，我希望先前展开的节点折叠(如手风琴菜单)。
我认为我必须在onExpand的自然事件中使它崩溃。但我不知道怎么做。
提前结束。
浏览 3提问于2014-05-25得票数 0
回答已采纳
我从一个服务中获取数据，所以手风琴的数量是可变的。我使用ng-repeat来动态显示折叠面板。
<div ng-controller = "groupController">
<div ng-repeat = "groups in groupNames">
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div c
浏览 0提问于2015-06-04得票数 3
2回答
我没有发现，在AMP的手风琴库中有任何选项或事件可以使手风琴的感觉像我期望的那样。但是，我已经使用jquery做了很多更改，但现在我需要平滑地展开和折叠项目。有没有办法做到这一点。
浏览 0提问于2017-07-05得票数 0
1回答
4个小时以来，我一直在尝试修改手风琴模板，使其看起来和感觉上都像是一个表格行。本质上，我希望有一个表，其中每个行元素都是一个折叠组，当单击它时，将折叠/显示有关该特定项的更多详细信息。
我希望它有类似于此的感觉(请原谅糟糕的标记，只是一个演示)：
到目前为止，这可能是我得到的最接近的结果：
有没有人可以一步一步地告诉我如何让手风琴看起来像桌子？
浏览 0提问于2013-07-23得票数 3
回答已采纳
我有一个Bootstrap accordion，默认情况下是折叠的。我想让它在手风琴在页面上显示时打开，反之亦然，当它不在视图中时，它就会被关闭。帮帮忙？
浏览 1提问于2016-12-16得票数 0
14回答
我在一个项目上使用 (不允许一次打开多个项目())。使用手风琴是合适的，因为我通常一次只想打开一个面板。
不过，我需要提供一个“展开所有”链接，切换到“折叠所有”时，点击。我不想自定义编写几乎相同的手风琴功能围绕这一要求，所以我想要一些JS将实现这一点，同时保持手风琴组件的使用。
问题：需要哪些JavaScript/jQuery才能实现这一目标，同时仍然使用jQuery UI "Accordion“组件来支持标准功能？
这里有一个小提琴：
浏览 35提问于2012-10-11得票数 36
回答已采纳
我有一个手风琴展开/折叠效果，但当我点击第一个面板展开按钮，它也展开所有其他面板。
单击相应的折叠链接时，我希望打开父面板。
这是我的密码
$('.stats-panel').hide();
$(".expand a").click(function(){
$(this).parent().toggleClass('collapse');
$('.expand').parent().children().find('.stats-panel').slideTog
浏览 4提问于2013-12-27得票数 0
回答已采纳
我是相当新的网页开发。我花了几天的时间研究这个(尴尬的)问题，并研究了我能想到的一切。
我使用Rails 5、引导3和jQuery2.1.3。
我有个鞋带手风琴。在各种折叠内容div中，我希望链接到驻留在同一手风琴中的内容，但需要一个不同的折叠面板。
在当前的折叠面板中，我有如下链接：
<a class="self-link" href="#buried_sub_anchor">Buried Sub Anchor</a>
在另一个折叠面板中，我有一个内容div，如下所示：
<div class="anchor" id
浏览 1提问于2016-12-13得票数 0
回答已采纳
1回答
当手风琴被折叠时，我想要一个‘加号’图标，当手风琴被‘展开’时，我想要一个‘减号’图标。我在网上查过其他答案，但我要问的是，我不能做这样简单的事情吗？(为学习目的)
假设我将正负图标放置在手风琴<i class="fa-plus"> <i class="fa-minus">上，正如我所看到的，当手风琴折叠时，它有一个collapsed类，所以我想在单击collapsed类时隐藏并显示这两个图标。为什么当点击手风琴时DOM被更新时，它就不能工作？
if(document.getElementById('candidateName
浏览 2提问于2022-08-19得票数 0
回答已采纳
我有一个手风琴按钮，里面有一个嵌套的JQuery数据表。datatable有可折叠的子行，可以展开，但是问题是，当打开子行时，我无法获得手风琴来动态调整其高度。因此，每当展开子行时，表的底部就会被切断。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("a
浏览 2提问于2018-03-27得票数 0
回答已采纳
2回答
使占位符div可动态重叠
、、、、
我使用jQuery UI accordion作为页面右侧的菜单。但是，在某些情况下，菜单会比左侧的内容更高。因此，在展开/收缩折叠部分时，浏览器上的滚动条可以在打开折叠部分时放大/缩小。我的想法是在手风琴下面有一个div，这是手风琴可能达到的高度，当手风琴展开时，它只会覆盖它，这样根本不会改变浏览器上的滚动条(希望这是有意义的)。给它一个位置:绝对的，声明高度和宽度似乎搞乱了布局，把它放在页脚上，但在它下面出血。有没有人有关于如何让它工作的想法？如果你需要一个更详细的例子，我会看看我能做些什么来提供它，但是，网站被锁定了，我不能给出用户名/密码。
浏览 1提问于2010-12-15得票数 0
回答已采纳
3回答
如何避免手风琴在页脚重叠
、、、
我是jQuery的新手。我在用手风琴。当我点击手风琴时，它会重叠在页脚上。我怎样才能避免它？
下面是页脚的代码-
<footer>
<div class="row footer_class">
<div class="container">
<div class="col-lg-8 font_color">Copyright © 2013</div>
<div class="col-l
浏览 3提问于2014-03-15得票数 2
3回答
展开/折叠所有数据
、、、
我正在做一个手风琴，当我们点击每个单独的项目，那么它的打开或关闭良好。
现在，我已经实现了扩展所有或折叠所有选项，使所有手风琴展开/折叠。
Accordion.js
const accordionArray = [
{ heading: "Heading 1", text: "Text for Heading 1" },
{ heading: "Heading 2", text: "Text for Heading 2" },
{ heading: "Heading 3", text:
浏览 2提问于2020-09-29得票数 0
我正在使用折叠插件，我想知道如何才能同时打开多个组。在他们的演示页面中：
在给定的时间内，只允许打开一个。我认为这是手风琴的预期行为，但我如何才能改变它，使打开一个组不会折叠其他组？
浏览 0提问于2013-03-29得票数 74
回答已采纳
我正在使用ExtJS开发一个应用程序。我有一个手风琴，需要选择一个活动项目(因此它会展开)。Accordion.setActiveItem输出以下内容：
"setActiveItem" is not a function in a browser's error window.
第二个问题是，hideCollapseTool属性在初始化时设置为true时，不会执行任何操作。折叠工具仍在显示中。
我使用的是ExtJS 3.1.1。我将非常感谢任何提示和答案。
浏览 0提问于2010-09-07得票数 4
我正在使用angular js ng-table来显示一些信息。我想用滚动bar.Moreover来修复ng-table的标题，我需要在ng-table之前放置一个手风琴。
当我折叠折叠面板时，我的ng-table固定标题不能正常工作。请参考我创建的柱塞："http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview"
浏览 7提问于2015-07-15得票数 0
有没有可能创建只包含头部而不添加任何容器的折叠面板？有没有办法让我只创建只有标签的三个部分的手风琴？
浏览 2提问于2010-12-17得票数 0
1回答
JQuery手风琴
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul'),
浏览 9提问于2015-01-23得票数 0
回答已采纳
1回答
展开/折叠jQuery树
、、、
我正在使用来自jQuery的可树库，我试图做一种类似手风琴的行为，当我打开其中一个级别并展开它时，我想折叠以前打开的另一个级别。我不知道如何使用jQuery树库来实现这种行为。
这是我可树的代码：
function buildTreeTable(tree){
$("#example").treetable({
expandable: true,
onNodeExpand: nodeExpand,
onNodeCollapse: nodeCollapse
});
function nodeExpand
浏览 0提问于2017-08-17得票数 2
1回答
我有一个圆滑的旋转木马，里面有一些手风琴标签。 我需要能够对bootstrap折叠/展开做出反应，并调整旋转木马的高度。 它可以正确地调整自适应高度，但只需完整旋转一次。 我该怎么做呢。
浏览 9提问于2020-06-22得票数 0
我设置了一个手风琴风格的导航列表，这样当类别被点击时，它就会打开，显示链接到页面的子类别。
我想要做的是让折叠导航列表在新页面打开时保持打开或关闭状态。
我已经知道cookie可以在刷新时保留状态，但是当访问不同的页面时如何保留状态呢？所有页面都有相同的折叠式导航列表。
浏览 0提问于2012-01-01得票数 1
回答已采纳
我有手风琴布局，右侧有折叠按钮(这是默认行为)。如何将折叠按钮位置更改为左侧？
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
},
浏览 5提问于2014-05-13得票数 0
回答已采纳
如果我同时使用DataTable的responsive和select扩展，就会有一种令人困惑的行为：
单击一行，它将被选中并展开以显示子行。好的。
单击另一行，因此此行将被选中并展开。还是没问题。
再次单击第一行，它将被选中，但会折叠。不太好。
如何使行的行为类似于jQuery UI手风琴？意思是，在我做了新的选择之后，折叠所有未选定行的子行？
小提琴手：
浏览 3提问于2017-02-09得票数 0
回答已采纳
2回答
我有一个ajax手风琴，我想在页面加载5秒后关闭它。我试着用javascript来做这件事，但是没有运气。我试图将SelectedIndex的手风琴控件更改为将折叠手风琴的值。SelectedIndex =0是打开的(默认)，在javascript计时器用完后，我试图将它更改为1。
$(document).ready(function () {
// close the accordion after 5 seconds
setTimeout(function () { document.getElementById('MainContent_Accordion1').Sele
浏览 3提问于2014-10-12得票数 1
回答已采纳
5回答
我有手风琴是可折叠的和可分类的。
看这里的完整代码在行动
这是我使用的JS代码
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
浏览 3提问于2013-08-22得票数 3
回答已采纳
3回答
我在手风琴项目的标题里有一个复选框。但是，当我单击复选框时，它会折叠或展开手风琴项目。是否有一种方法可以单击复选框，而不需要手风琴展开/折叠？
浏览 0提问于2013-10-22得票数 0
回答已采纳
2回答
下午好
块问题的答案有必要按手风琴类型在jquery上编写脚本。
块html (这样的块将被重复)：
<div class="question">
<h3 class="question__title">Что влияет на стоимость услуг?</h3>
<div class="question__icon"></div>
<div class="question__wr">
<p class=
浏览 0提问于2018-05-05得票数 2
回答已采纳
通常，extjs中的展开/折叠功能可以工作，因为面板/网格标题停留在一个位置，面板/网格的主体向下/向上移动。但是我需要面板标题在一个位置，在展开时，标题必须向上移动显示面板/网格体。在崩溃时，标题必须向下移动，并到达原来的位置。这就像在手风琴布局内部面板上展开和折叠一样。但我想要一个单板。任何代码示例或指针都将非常有用。
注意:请注意，我不能使用任何第三方插件。
浏览 2提问于2014-02-24得票数 2
1回答
我无法谷歌/冰的asp.net ajax手风琴菜单CSS垂直，这在每个窗格上都有箭头按钮。展开时显示不同的箭头，折叠时应显示不同的箭头。
浏览 4提问于2011-04-11得票数 1
回答已采纳
2回答
我有下面的项目与角度使用引导手风琴。当用户单击面板时，折叠面板将显示一个开放街道地图，但由于某种原因，该地图没有显示。
如果我将行为更改为始终显示面板，如:class=“折叠显示”，则映射将被正确初始化
实现
浏览 7提问于2020-03-10得票数 3
回答已采纳
我在做手风琴零件。我希望一次只打开一个手风琴(一共有三个手风琴)。换句话说，除当前打开的手风琴外，任何打开的手风琴都应在单击任何手风琴时倒塌。
现在，我可以切换这些手风琴打开/关闭，但我无法弄清楚如何‘选择’他们，以便应用“折叠”类，如果它目前没有被选中。我的选择输入是错误的，在第一次点击(它是显示相反的预兆)。
accordion-group.component.ts
import { AccordionComponent } from './../accordion/accordion.component';
import { Component, Input } fro
浏览 0提问于2018-03-28得票数 0
回答已采纳
我可以让我的手风琴自动打开一个部分在悬停，但我不知道如何防止它折叠一个节，当移动鼠标光标在手风琴的活动标题。
以下是我的代码：
$("#accordion").accordion({
event: 'mousedelay'
}).delegate('.ui-accordion-header', 'mouseover', function() {
clearTimeout($(this).closest('.ui-accordion').data('timeout
浏览 3提问于2016-01-18得票数 0
回答已采纳
4回答
引导手风琴-设置为特定高度
、、、、
我有一个鞋带手风琴，它有一个一英里长的列表，我想把打开的高度设置为大约200 to。当我在CSS中这样做时，手风琴就会打开，但是要达到完全高度，然后在打开后设置为200 it。
我尝试的不仅仅是折叠类，而是类中的折叠和折叠，所做的就是打开手风琴弹出而没有动画。
CSS：
.collapse.in, .collapse{
height: 200px;
overflow-y: scroll;
}
我需要在哪里设置高度，以便手风琴只打开到200 at，并在200 at停止动画？
示例：
浏览 3提问于2015-06-25得票数 4
回答已采纳
我正在创建一个手风琴从一个数据库与复选框在标题。我已经看到了使用click()函数解决单击复选框而不激活accordion的问题的解决方案，但由于我是动态创建accordion，click()函数将不起作用。我不知道如何解决在动态生成的折叠面板标题中单击复选框的问题。
问题是单击事件在打开(‘单击’)有机会运行e.stopPropagation之前激活了折叠。
有什么想法吗？
浏览 0提问于2013-07-16得票数 2
回答已采纳
2回答
我正在尝试在我的accordion found 展开/折叠时让JScrollPane重新初始化。您可以通过单击其中一个父对象(石瓦、石槽、石墙覆层等)来演示手风琴。
现在，我使用以下JQuery将其设置为单击事件...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("ul#widget-collapscat-5-top > li.collapsing").click(function() {
$(this
浏览 0提问于2012-09-22得票数 0
回答已采纳
1回答
我已经使用JSF创建了一个表单。在我的表单中有许多手风琴面板，每个手风琴面板都由几个字段组成。
我想使用js禁用这样一个手风琴面板的所有字段。有没有一种快捷方法可以一次禁用整个折叠面板，而不是单独禁用折叠面板的每个字段。
浏览 0提问于2020-04-14得票数 0
我正在使用这个插件来给我相等的列高度，这样我就可以在右侧侧边栏的底部粘贴一个div。
它工作得很好，但是在我的一些页面中，我使用了jQuery手风琴滑块，这意味着在手风琴中包含了相当多的信息，即使它是隐藏的。
问题是equalheight插件似乎没有意识到这些信息是隐藏的，因此它与主栏的高度匹配，就好像手风琴中的所有信息都被显示了一样，因此给了我一个很长的侧边栏和一个很短的主要内容div (因为信息被关闭在手风琴抽屉里)。
有没有人可以告诉我如何解决这个问题？
这是我的js -
//functions to be executed on page load
$(function(){
/
浏览 2提问于2010-04-16得票数 1
1回答
倒塌的jQuery手风琴
、、、、
我在用jQuery手风琴。我想设置手风琴，因为扩展了或，一塌糊涂。
为此，我写了如下：
<script type="text/javascript">
$(function() {
$( "#_title_${sec_id}_id" ).accordion({
active: ${open},
collapsible: true,
heightStyle: "content"
});
});
</sc
浏览 0提问于2013-12-20得票数 0
回答已采纳
2回答
确定引发引导事件的原因
、、、
我有一个手风琴手风琴，还有一个按钮可以扩展所有的手风琴面板。这个很好用。
HTML:
<div class="btn btn-primary btn-sm" id="accordion-expand-all">Expand all</div>
JS:
$("#accordion-expand-all").click(function() {
$(".panel-collapse").each(function() {
if ($(this).hasClass("in"
浏览 4提问于2015-07-02得票数 0
回答已采纳
1回答
动态手风琴不完全工作
、、、
所以我在zendesk上有一个手风琴，它是动态的，拉动内容。我有一个问题，当我按下手风琴的任何一个标签时，只有手风琴的第一个标签被折叠。我想是因为数据-目标：
我已经把它设置为打开一个#id，我想我需要让它变得动态，但是要知道怎么做。有人能帮忙吗？
这是一段代码：
<div class="accordion-wrapper">
<ul data-toggle="collapse" data-target="#demo" class="article-list article-list_page">
浏览 0提问于2018-06-29得票数 0
回答已采纳
我在父母手风琴里面有一张手风琴清单，比如：
<div id="parentAccordion" class="card-accordion">
<div class="card">
<div class="card-header bg-black text-white pointer-cursor">
<div class="row">
<div st
浏览 0提问于2019-06-11得票数 0
回答已采纳
我有这个问题:我的移动应用程序有一些基于Bootstrap的手风琴。默认行为使折叠和展开仅作用于内部链接，而不是整个标题面板。我需要改变这一点，这样当用户单击标题面板的任何部分时，手风琴都会展开和折叠。
浏览 2提问于2015-09-12得票数 0
3回答
我想在手风琴组件的标题中添加操作。唯一的问题是，如果你点击这个动作，手风琴就会在折叠和展开之间显示长度。
示例：
<nb-accordion>
<nb-accordion-item #primaryItem expanded="true">
<nb-accordion-item-header>
Dashboard
<nb-actions size="small">
<nb-action icon="search">Search</
浏览 2提问于2020-04-30得票数 2
回答已采纳
我用jQuery启动了一些小的网络应用程序。脚本的某些部分由手风琴组成，我可以在其中获得并设置活动面板的标题(标题)，在扩展面板中编写.我希望根据我的jQuery经验为移动设备制作版本，但是由于我能够获得可折叠集中活动面板的ID (可折叠的)，所以我现在不知道如何在
第1小组的名称
可折叠扩展标签。有没有人能给我指点一些参考(在网页/书上)，在那里可以看到和学习所有这些模糊的选项，jQuery移动UI控件？我看到了一些iu-可折叠标题等选项，但简单地说，我不知道如何将它插入我的代码；通过使用jQuery，与移动版本相比，它很容易。请帮帮忙。
浏览 0提问于2017-12-02得票数 1
回答已采纳
1回答
我需要用手风琴或不用手风琴来显示内容。有没有一种方法可以轻松地添加和删除手风琴行为？换句话说，我可以将应用于div的样式和行为恢复到“折叠”之前的状态吗？
浏览 3提问于2013-01-25得票数 1
回答已采纳
我有一个网站，有一个手风琴里面有多个手风琴。我试图通过使用$('#outer_accordion').hasClass('ui-state-active')方法检查来确定外部accordion的状态(展开/折叠)。
但是，当展开内部accordion而折叠外部accordion时，此方法返回true。
有没有办法知道外部手风琴是展开的还是折叠的，而不管内部手风琴的状态如何？
在此之前非常感谢。
浏览 5提问于2015-12-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
