jquery的自举崩溃工作不正常

我有在元件div class"collapse"和2键含量： 1.一种用于更新数据的第一个按钮崩溃的元件外 2.崩溃元件+更新其他数据第二按钮jquery的自举崩溃工作不正常

我的问题： 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); 
    });

来源

2017-09-07 muzamil indra

您可以创建小提琴？ – vel

@vel，已经在顶部...，我想崩溃总是隐藏每一个点击第一个按钮。但是当我第一次点击第一个按钮，崩溃是打开，然后第二次点击，第三次点击，等等....崩溃是隐藏正确...，我有一个问题，第一次点击 –

我在jsfiffle错误' VM70 bootstrap.min.js：6未捕获错误：引导程序下拉需要Popper.js（https://popper.js.org） at'。 – vel

你做错了.... 的按钮。 ..

<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>

来源

2017-09-07 09:23:24

如果你想在加载时显示div崩溃... 添加类“in”与崩溃的div＃collapsingDiv，没有进一步的JavaScript jquery需要... 只有bootstrap -css和js是需要的... –

我使用JavaScript处理崩溃.... –

好吧生病了很快，当免费复制你的小提琴和使工作小提琴 –

这个问题就解决了....

我只是说

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

像

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

谢谢你回答我的问题

来源

2017-09-08 07:48:03

jquery的自举崩溃工作不正常

回答

相关问题