Collapse插件提供了一种显示和隐藏内容的快速方法。通过几个类和Bootstrap 4 JavaScript插件,它使内容在程序上的可感知性发生了变化。
内容的翻转(切换)需要与href属性或具有data-target属性的按钮连接。在这两种情况下,都需要data-toggle =“ collapse” 。
句法:
与href属性链接。
或者
具有data-target属性的按钮。
要显示卡:
例子:
HTML
How to automatically close all
collapsible elements inside of
the accordion when closing the
accordion?
Geeksforgeeks
Connect with href
Basic Example
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4
JavaScript plugins.
HTML
Multiple Collapse
Geeksforgeeks
Flip first card
Multiple collapse
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
Multiple collapse
Collapse plugin provides a quick way
of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
HTML
Accordion
Geeksforgeeks
Collapse plugin provides a
quick way of revealing and
hiding content. It toggle
the visibility of content
across your program project
with a few classes and
Bootstrap4 JavaScript plugins.
Using the card component, you
can extend the default collapse
behavior to create an
accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
HTML
Accordion
Geeksforgeeks
Some Content of First One
Some Content of First Two
Some Content of First Three
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出:
**注意:如果您不希望将内容放在此处,请删除
多个目标:多个或元素可以显示或隐藏该组件,以防它们使用href或data-target属性引用该组件。 或可以通过在其href或data-target属性中使用jQuery选择器对其进行引用来显示和隐藏多个元素。
例子:
的HTML
Multiple Collapse
Geeksforgeeks
Flip first card
Multiple collapse
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
Multiple collapse
Collapse plugin provides a quick way
of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
输出:
手风琴:利用卡片组件,您可以扩展默认的折叠行为以形成手风琴。
范例:
的HTML
Accordion
Geeksforgeeks
Collapse plugin provides a
quick way of revealing and
hiding content. It toggle
the visibility of content
across your program project
with a few classes and
Bootstrap4 JavaScript plugins.
Using the card component, you
can extend the default collapse
behavior to create an
accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出:
关闭手风琴时如何自动关闭手风琴内部的所有可折叠元素?
例子:
的HTML
Accordion
Geeksforgeeks
Some Content of First One
Some Content of First Two
Some Content of First Three
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出:
为什么我们使用咏叹调扩展和咏叹调控制?
将aria扩展名添加到控件组件。这种质量明确地(明确地)传递到与控件相关联的可折叠组件的当前状态,以筛选每个用户(阅读器)和可比较的辅助技术。如果可折叠组件默认情况下处于关闭状态,则控制组件上的属性应该具有(set) aria-expanded =“ false”的自尊。如果您使用show类将可折叠组件默认设置为打开,则在控件脚背上设置aria-expanded =“ true”。因此,该插件将根据是否已打开或关闭可折叠组件(通过JavaScript,或者由于客户端激活了另一个与该可折叠组件绑定的控件组件),在控件上翻转(切换)此特征。如果控制元素的HTML组件不是按钮(例如或 如果您的控件组件只关注单个可折叠组件,即data-target属性指示ID选择器,则应将aria-controls属性包括在控件组件中,其中包含可折叠组件的ID 。先进的屏幕浏览器用户和比较先进的辅助技术(技术)利用此特性为客户提供了额外的替代途径,以直接探索可折叠组件本身。 我们可以通过数据属性或JavaScript使用Collapse和Accordion。 通过数据属性:崩溃插件利用许多类来处理压倒性的提升: 向该组件添加data-toggle =“ collapse”和一个数据目标,以自然地分配对一个或多个可折叠组件的控制。 data-target属性确认CSS选择器应用折叠。毫无疑问将类崩溃包括到可折叠组件中。如果您希望它默认打开,请增加额外的班级表演。 为了将类似手风琴的集合管理包括到可折叠范围,请包含信息属性data-parent =“#selector” 。 通过JavaScript: 方法:
$('.collapse').collapse()