Bootstrap4 手风琴

手风琴菜单和小部件在网站上被广泛应用，主要用于管理大量内容和导航列表。 使用 Bootstrap 折叠插件，我们可以创建手风琴或简单的可折叠面板，而无需编写任何 JavaScript 代码。

以下示例将展示如何使用 Bootstrap 可折叠插件和面板组件构建一个简单的手风琴小部件。

<div class="accordion" id="myAccordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">1. What is HTML?</button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#myAccordion">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">2. What is Bootstrap?</button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">3. What is CSS?</button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#myAccordion">
            <div class="card-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.jiyik.com/w/css/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

尝试一下

上面示例显示效果如下

带有加减图标的 Bootstrap 手风琴

我们还可以向 Bootstrap 手风琴小部件添加加减图标，通过几行 jQuery 代码使其在视觉上更具吸引力，如下所示：

$(document).ready(function(){
    // Add minus icon for collapse element which is open by default
    $(".collapse.show").each(function(){
        $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
    });
    
    // Toggle plus minus icon on show hide of collapse element
    $(".collapse").on('show.bs.collapse', function(){
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
    }).on('hide.bs.collapse', function(){
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
    });
});

尝试一下

上面示例显示效果如下所示，我们也可以点击上面的 尝试一下 查看效果

同样，我们可以使用 jQuery 和 CSS 过渡效果向手风琴添加箭头图标 。

上面例子中的 show.bs.collapse 和 hide.bs.collapse 是折叠事件，我们将在本教程稍后部分了解这些事件。

通过 data 属性展开和折叠元素

我们可以使用 Bootstrap 折叠功能通过 data 属性展开和折叠任何特定元素，而无需使用 accordion 标记。

<!-- 触发按钮 HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">

<!-- 折叠元素 HTML -->
<div id="toggleDemo" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>

尝试一下

我们刚刚创建了一个可折叠控件，而无需编写任何 JavaScript 代码。 好吧，为了更好的理解，让我们将这段代码的每一部分都一一梳理一遍。

代码解释

Bootstrap 折叠插件基本上需要两个元素才能正常工作 - 控制器元素，例如按钮或超链接，通过单击要折叠的其他元素，以及可折叠元素本身。

• data-toggle="collapse" 属性（第 2 行）与属性 data-target（用于按钮）或 href（用于锚点）一起添加到控制器元素，以自动分配可折叠元素的控制。
• data-target 或 href 属性接受一个 CSS 选择器来将折叠应用到特定元素。 确保将类 .collapse 添加到可折叠元素。
• 除了类 .collapse 之外，我们还可以选择将类 .show 添加到可折叠元素以使其默认打开。
• 要使可折叠控件像手风琴菜单一样在组中工作，可以使用前面示例中演示的 Bootstrap 面板组件 。

通过 Javascript 展开和折叠元素

我们还可以通过 JavaScript 手动展开和折叠单个元素——只需在 JavaScript 代码中使用可折叠元素的 id 或类选择器调用 Bootstrap 的 collapse() 方法。

$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggleDemo").collapse('toggle');
    });
});

尝试一下