Question

bootstrap4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

提供了手风琴控件

当我尝试在我的angular 6应用程序中使用它时，它不会崩溃。浏览器中没有错误，但不起作用。对这个有任何想法吗？

html

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

****编辑****

这是实时代码示例 https://stackblitz.com/github/Rugved/ng6bt4Demo/

*****编辑**** jQuery包含在angular.json文件中

        "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",    
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js"                        
        ]

Answer 1

您的代码对我来说很好用。

请找到以下配置

package.json

{
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3",
"jquery": "3.3.1"
}

angular.json

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 2

引导程序中的许多组件都需要包含jQuery才能起作用。

签出此pen，如果您注释jQuery，则collpase不起作用，而取消注释则它起作用。

从引导docs

我们的许多组件都需要使用JavaScript才能起作用。具体来说，它们需要jQuery，Popper.js和我们自己的JavaScript 插件。在页面末尾放置以下，在结束标记之前，启用它们。 jQuery必须来首先是Popper.js，然后是我们的JavaScript插件。

您包含的引导程序包不包含jQuery。在npm中，

捆绑的JS文件（bootstrap.bundle.js和缩小的bootstrap.bundle.min.js）包括Popper，但不包括jQuery。

Angular6和Bootstrap4可折叠div不起作用

2 个答案: