bootstrap 4 崩溃不适用于 jquery 缩小版本答案

【问题标题】：bootstrap 4 collapse not working with jquery minified versionbootstrap 4 崩溃不适用于 jquery 缩小版本
【发布时间】：2020-04-23 04:08:14
【问题描述】：

我想为徽章添加一个 jquery FadeOut 效果，但问题是（效果或功能）需要缩小版（完整版）所以我用完整版（3.5.0）CDN替换了超薄CDN，然后 bootstrap 4（崩溃类）停止工作。

代码：- 包含

<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<!-- Bootstrap Jquery JavaScripts  -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Jquery JavaScripts  -->

折叠代码和淡出：-

<script>
    function badgefade(){
        // document.getElementById("").
        $("#notificationsBadge").fadeOut("slow");
    }
</script>

<div class="collapse" id="'.$item['companyexported'].'"> ..... </div> ---- Collapse Not Working

<a class="nav-link" href="#" id="notificationsdrop" onclick="badgefade()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

2:- 我记得我在 (Onclick) 属性中有另一个问题，该功能只有在我尝试替换字体真棒图标 onclick 时才会触发

代码->

<script>
function arrow(){
    if (document.getElementById("arrow").className = "fa fa-arrow-down") {
        document.getElementById("arrow").className = "fa fa-arrow-up";
} else {
    document.getElementById("arrow").className = "fa fa-arrow-down";
}
}
</script>

<h3><a class="btn btn-success billbtn" onclick="arrow()" data-toggle="collapse" style="width: 280px !important;"href="#'.$item['companyexported'].'" aria-expanded="false" style="direction:RTL;"aria-controls="contentId"><i id="arrow" class="fa fa-arrow-down" style="float:left" aria-hidden="true"></i><span class="badge badge-light">'.$item['accountid'].'</span>&nbsp;&nbsp;&nbsp;&nbsp;فاتورة ('.$item['companyexported'].')</a></h3>

【问题讨论】：

你还没有导入 popper.js，这是 bootstrap 的补充。转到此 URL 并添加依赖项，getbootstrap.com/docs/4.4/getting-started/introduction。
@noobprogrammer 我把它放在 jquery 之前，没有任何反应控制台 :Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. at Object.jQueryDetection (util.js:176) at util.js:192 at bootstrap.min.js:6 at bootstrap.min.js:6 profile.php:36 Uncaught TypeError: Cannot read property 'style' of null at openNav (profile.php:36) at HTMLElement.onclick (VM5304 profile.php:89)
@Rusty 我知道我刚刚删除了我认为它很好用但是我再次添加它并没有任何反应
你需要防止Default() 锚标签('a')。您不能在不阻止其默认操作的情况下将任何功能绑定到它。
@Pranaykumar 对不起，请注意你是在谈论箭头还是崩溃

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

缺少的是 Rusty

正确指出的 popper.min.js

按照与上述相同的顺序包含以下脚本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

希望对你有帮助

【讨论】：

我很高兴它有所帮助。 :) 如果您觉得这有帮助，请标记为答案，以便人们可以轻松找到它。

【解决方案2】：

Jquery 3.5.1 已经发布。它修复了 bootstrap 4.4.1 崩溃的问题 https://github.com/twbs/bootstrap/issues/30553

【讨论】：