Bootstrap 折叠不适用于 JQuery

Bootstrap Collapse Not Working with JQuery

提问by Mick

This is driving me insane.

这让我发疯。

I have this:

我有这个：

<div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading" id="panel-head">


                <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle" >Records Added
                    <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span>
                </a>

            </div>


            <div id="collapseDiv" class="panel-collapse collapse">
                <div class="panel-body">

And I am trying to fire the collapse with this (in various ways):

我试图用这个（以各种方式）引发崩溃：

$('#collapseDiv').collapse("toggle")

$('#collapseDiv').collapse("toggle")

All I get is:

我得到的是：

Uncaught TypeError: $(...).collapse is not a function(…)

未捕获的类型错误：$(...).collapse 不是函数(...)

Any ideas?

有任何想法吗？

```

``

```

``

回答by Luthando Ntsekwa

Make sure Jquery is included above Bootstrap, it works fine

确保 Jquery 包含在 Bootstrap 之上，它工作正常

$('#collapseDiv').collapse("toggle");

.white-link{color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading" id="panel-head">


      <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle">Records Added
                        <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span>
                    </a>

    </div>


    <div id="collapseDiv" class="panel-collapse collapse">
      <div class="panel-body">

回答by Zohab Ali

I was having the same problem.... So in JQuery I did something like this:

我遇到了同样的问题......所以在 JQuery 中我做了这样的事情：

$('#collapseDiv').removeClass('show');

As mentioned in official doc...

正如官方文档中所述...

1. .collapse hides content
2. .collapsing is applied during transitions
3. collapse.show shows content

1. .collapse 隐藏内容
2. .collapsing 在过渡期间应用
3. collapse.show 显示内容

so that is why I removed 'show' class and it worked for me... only drawback is that it hides immediately (without any animation)

所以这就是为什么我删除了“show”类并且它对我有用......唯一的缺点是它会立即隐藏（没有任何动画）

回答by Ovidiu Luca

I had a similar problem with Lightbox (by Lokesh Dhakar) if I used:

如果我使用了 Lightbox（由 Lokesh Dhakar 提供），我也遇到了类似的问题：

<script src="js/lightbox-plus-jquery.min.js"></script>

but worked with:

但与：

<script src="js/lightbox.min.js"></script>

回答by kontashi35

It took me an hour to figure it out.
Here is the simple solution. I will explain with three different method
1. Replace

我花了一个小时才弄明白。
这是简单的解决方案。我将用三种不同的方法来解释
1. 替换

import * as $ from 'jquery';

with

和

declare var $ : any;

If it did't solve your problem than
2. make sure you import jquery and bootstrap in index.html as below, jQuery shoud be first

如果它没有解决你的问题
2. 确保你在 index.html 中导入 jquery 和 bootstrap，如下所示，jQuery 应该是第一个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

If it did't work
3. than install jquery,jquery ui,jquery action and bootstrap

如果它不起作用
3. 安装 jquery,jquery ui,jquery action 和 bootstrap

npm install jquery --save
npm install @types/jquery --save
npm install bootstrap --save

Now import in your ts or js file

现在导入您的 ts 或 js 文件

import * as $ from 'jquery'; 

Update angular.json file

更新 angular.json 文件

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"

            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

That all it should work by now,Thanks

现在应该可以了，谢谢

回答by Khawar Mehmood

jquery 3.5.0 is giving error in using collapse feature of bootstrap 4 instead use jquery 3.4.1 version. it worked properly in my case.

jquery 3.5.0 在使用 bootstrap 4 的折叠功能时出错，而使用 jquery 3.4.1 版本。在我的情况下它工作正常。

回答by palak1510

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading" id="panel-head"> <a data-toggle="collapse" href="#collapseDiv" class="white-link" id="toggle" >Records Added <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> </a> </div>
    <div id="collapseDiv" class="panel-collapse collapse">
      <div class="panel-body">rywrujtwyjdtyjdsyjktyj</div>
    </div>
  </div>
</div>

Please check this. Your bootstrap.min.js/bootstrap.js is declare after your jquery library declaration.

请检查这个。您的 bootstrap.min.js/bootstrap.js 在 jquery 库声明之后声明。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

回答by REDEVI_

Try this

尝试这个

 $('.panel-collapse').collapse({
      toggle: false
    });

Source :Bootstrap Collapse - Jquery "Collapse all" function

来源：Bootstrap Collapse - Jquery“全部折叠”功能