jquery bootstrap崩溃无法正常工作答案

【问题标题】：jquery bootstrap collapse not working properlyjquery bootstrap崩溃无法正常工作
【发布时间】：2017-09-08 15:48:03
【问题描述】：

我在元素 div class"collapse" 和 2 按钮中有内容： 1. 折叠元素外更新数据的第一个按钮 2.折叠元素的第二个按钮+更新其他数据

我的问题： 1.如果我打开页面，元素类"collapse"是隐藏的，当我点击第二个按钮时，会显示折叠。然后我想更新第一个按钮中的数据，立即隐藏元素"collapse"。但是为什么当我单击第一个按钮时，会显示元素“折叠”？尽管如此，用于更新数据和隐藏元素折叠的第一个按钮。第二个按钮显示折叠...

https://jsfiddle.net/e6ny483c/

我的页面：

<div class="grid fluid">
    <div class="row ">
        <div id="containerTanggal" class="col-sm-4 " >
            Tanggal Monitoring:
            <div class="input-control text" style="width: 150px">
                <input type="text" name="tanggalMonitoring" id="tanggalMonitoring"/>
                <span id="image_button_tanggalMonitoring" class="btn-date"></span>
            </div>
        </div>
        <button class="large primary btnLoadMonitoring" type="submit" id="btnLoadMonitoring">Lihat Monitoring</button>
    </div>

    <!--overview hari ini-->
    <div class="row">
        <!--gauge bensin-->
        <div class="col-md-3">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <div class="gauge-canvas">
                            <div class="widget-h">Penggunaan Bahan Bakar Hari Ini</div>
                            <canvas width=160 height=100 id="bahanbakarHariIni"></canvas>
                        </div>
                        <ul class="gauge-meta clearfix">
                            <li id="gauge-textfield" class="pull-left gauge-value"></li>
                            <li class="pull-right gauge-title">Liter</li>
                        </ul>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-3">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <div class="daily-visit">
                            <div class="widget-h">Sampah Masuk Hari Ini</div>
                            <div class="mini-stat clearfix">
                                <div class="mini-stat-info" >
                                    <span id="tonaseHariIni"></span>
                                </div>

                            </div>
                            <ul class="chart-meta clearfix">
                                <li class="pull-left visit-chart-value" id="selisihTonase"></li>
                                <li class="pull-right visit-chart-title" id="persentaseSelisihTonase"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-3">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <div class="widget-h">Jenis Angkutan Sampah</div>
                        <div id="pie-chart-donut" class="pie-chart">
                            <div id="pie-donutContainer" style="width: 100%;height:150px; text-align: left;">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-3">
            <section class="panel">
                <div class="panel-body">
                    <div class="top-stats-panel">
                        <div class="widget-h">Kendaraan aktif hari ini</div>
                        <div >
                            <ol id="totalJenisKendaraanAktif" class="list-group">

                            </ol>
                            <div class="daily-sales-info" id="totalKendaraanAktif">

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-md-7">
            <!--tonase graph start-->
            <section class="panel">
                <header class="panel-heading">Tonase Lima TPS terbesar
                       <!-- <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-cog"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                        </span>-->
                </header>
                <div class="panel-body">
                    <div id="tonaseLimaHariTPS" class="main-chart">
                    </div>
                </div>
            </section>
            <!--tonase graph end-->
        </div>
        <div class="col-sm-5">
            <section class="panel">
                <header class="panel-heading">
                    Total Tonase 5 Hari Terakhir
                </header>
                <div class="panel-body">
                    <div id="tonaseLimaHariTotal"></div>
                </div>
            </section>
        </div>
    </div>

            <button type="button" class="btn btn-primary" id="next">Selanjutnya</button>


        <div class="collapse">
            <div class="row">
                <div class="col-md-6">
                    <section class="panel">
                                        <header class="panel-heading">
                                                Total Tonase Satu Bulan
                                        </header>
                                        <div class="panel-body">
                                                <div id="tonaseSatuBulanTotal"></div>
                                        </div>
                                </section>
                </div>
                <div class="col-md-6">
                    <section class="panel">
                                        <header class="panel-heading">
                                                Total Bahan Bakar Satu Bulan
                                        </header>
                                        <div class="panel-body">
                                                <div id="bahanBakarSatuBulanTotal"></div>
                                        </div>
                                </section>
                </div>
            </div>

                    <div class="row">
                            <div class="col-md-12">
                                    <section class="panel">
                                            <header class="panel-heading">
                                                    Rute Terakhir Seluruh Kendaraan
                                                        <!--  <span class="tools pull-right">
                                                                    <a href="javascript:;" class="fa fa-chevron-down"></a>
                                                                    <a href="javascript:;" class="fa fa-cog"></a>
                                                                    <a href="javascript:;" class="fa fa-times"></a>
                                                             </span>-->
                                            </header>
                                            <div class="panel-body">
                                                    <div class="adv-table">
                                                            <table class="display table table-bordered table-striped" id="ruteIndex">
                                                                    <thead>
                                                                    <tr>
                                                                            <th>Nomor Polisi</th>
                                                                            <th>Nama Supir</th>
                                                                            <th>Rute Asal</th>
                                                                            <th>Rute Tujuan</th>
                                                                            <th class="hidden-phone">Waktu Berangkat</th>
                                            <th class="hidden-phone">Waktu Target</th>
                                            <th>Lapor</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="tabelRute">
                                                                    </tbody>
                                                                    <tfoot>
                                                                    <tr>
                                                                            <th>Nomor Polisi</th>
                                                                            <th>Nama Supir</th>
                                                                            <th>Rute Asal</th>
                                                                            <th>Rute Tujuan</th>
                                                                            <th class="hidden-phone">Waktu Berangkat</th>
                                            <th class="hidden-phone">Waktu Target</th>
                                            <th>Lapor</th>
                                                                    </tr>
                                                                    </tfoot>
                                                            </table>
                                                    </div>
                                            </div>
                                    </section>
                            </div>
                    </div>
                    <div class="row">
                            <div class="col-md-9">
                                    <section class="panel">
                                            <header class="panel-heading">
                                                    Peta Surabaya <strong>(KLIK NOPOL PADA TABEL DI ATAS UNTUK MELIHAT RUTE)</strong>
                                                            <!--<span class="tools pull-right">
                                                                    <a href="javascript:;" class="fa fa-chevron-down"></a>
                                                                    <a href="javascript:;" class="fa fa-cog"></a>
                                                                    <a href="javascript:;" class="fa fa-times"></a>
                                                             </span>-->
                                            </header>
                                            <div class="panel-body" >
                                                    <h3 id="estimasiWaktu"></h3>
                                                    <div id="petaSurabaya" style="height: 500px;"></div>
                                            </div>
                                    </section>
                            </div>
                            <div class="col-md-3">
                                    <div class="mini-stat clearfix">
                                            <span class="mini-stat-icon pink"><i class="fa fa-tags"></i></span>
                                            <div class="mini-stat-info">
                                                    <span id="detailNopol"></span>
                                                    Nomor Polisi Kendaraan
                                            </div>
                                    </div>
                            </div>
                            <div class="col-md-3">
                                    <div class="mini-stat clearfix">
                                            <span class="mini-stat-icon green"><i class="fa fa-road"></i></span>
                                            <div class="mini-stat-info">
                                                    <span id="detailJarak"></span>
                                                    Estimasi Jarak Ditempuh
                                            </div>
                                    </div>
                            </div>
                            <div class="col-md-3">
                                    <div class="mini-stat clearfix">
                                            <span class="mini-stat-icon tar"><i class="fa fa-truck"></i></span>
                                            <div class="mini-stat-info">
                                                    <span id="detailWaktuBerangkat"></span>
                                                    Estimasi Waktu Berangkat
                                            </div>
                                    </div>
                            </div>
                            <div class="col-md-3">
                                    <div class="mini-stat clearfix">
                                            <span class="mini-stat-icon orange"><i class="fa fa-clock-o"></i></span>
                                            <div class="mini-stat-info">
                                                    <span id="detailWaktuSampai"></span>
                                                    Estimasi Waktu Sampai
                                            </div>
                                    </div>
                            </div>
                    <div id="divDetailWaktuSampaiTPA" class="col-md-3 hidden">
                                    <div class="mini-stat clearfix">
                                            <span class="mini-stat-icon orange"><i class="fa fa-clock-o"></i></span>
                                            <div class="mini-stat-info">
                                                    <span id="detailWaktuSampaiTPA"></span>
                                                    Estimasi Waktu Sampai TPA
                                            </div>
                                    </div>
                            </div>
                    </div>
            </div>
        </div>

我的 JS：

$(document).ready(function(){
    $(".btn-primary").click(function(){
        $(".collapse").collapse('show');
    });
});

$(".btnLoadMonitoring").click(function(){
        $(".collapse").collapse('hide');
        tanggal = $("#tanggalMonitoring").val();
        console.log(tanggal);
        updateMonitoring(tanggal);
    });

【问题讨论】：

你能创作小提琴吗？
@vel，已经在上面了...，我想折叠总是隐藏每次点击第一个按钮。但是当我第一次单击第一个按钮时，折叠是打开的，然后是第二次单击，第三次单击，依此类推......折叠是正确隐藏的......，我在第一次单击时遇到问题
我在 jsfiffle VM70 bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at 中遇到错误。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你做错了.... 对于按钮...

<button data-toggle="collapse" data-target="#collapsingDiv">Load Monitoring</button>
<div id="collapsingDiv" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos aut ea facere enim doloremque aliquam, ratione placeat, aspernatur at accusantium consequatur, itaque perferendis laboriosam architecto nam magni cupiditate error!
</div>

【讨论】：

如果您想在加载时显示 div 折叠...将带有折叠的类“in”添加到 div#collapsingDiv，不需要进一步的 javascript Jquery...只需要引导程序 - css 和 js ...
好吧，当你免费复制你的小提琴并制作一个工作小提琴时很快就会生病
jsfiddle.net/Gaurav__work/6rwxupb8/7 SEE This Fiddle... 它的工作.. 实际上问题不是你的代码.. 但是你使用了错误的 js 和错误的引导程序.. 我使用了 3.3.7 版本的引导程序但是你已经使用了 4 个版本，并且显示了一些错误，就像缺少 popover js 一样。我一直在使用...... Bootstrap 3 不是 4 版本，直到现在所以我建议你在你的 html 中更改文件或更新 popover js .. 它会工作
你正在使用 bootstrap-3 类并且你已经放置了 bootstrap-4 的文件，请检查外部资源。在 bootstrap-4 而不是 bootstrap-3 中需要 Popover js

【解决方案2】：

这个问题解决了....

我刚刚添加了

$(".collapse").collapse({toggle:false});

喜欢

$(document).ready(function () {
    $(".collapse").collapse({toggle:false});
    $(".btn-primary").click(function(){
            $(".collapse").collapse('show');
    });
});

感谢您回答我的问题

【讨论】：