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的自舉崩潰工作不正常

回答

相關問題