jqueryのブートストラップ崩壊正常に動作していない

私が持っている要素div class"collapse"と2ボタンのコンテンツ：崩壊要素の外側更新データ用 1.最初のボタン崩壊要素+更新、他のデータのための 2番目のボタンjqueryのブートストラップ崩壊正常に動作していない

私の問題： 1.私がページを開くと、要素クラス"collapse"が隠されています。私が2番目のボタンをクリックすると、折りたたみが表示されます。最初のボタンでデータを更新したい場合、すぐに要素"collapse"は非表示です。しかし、なぜ私が最初のボタンをクリックすると、要素 "崩壊"が表示されますか？データを更新して要素の崩壊を隠すための最初のボタンです。そして崩壊を表示する2番目のボタン...

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

あなたがフィドルを作成することができますへの対応をお願いいたします

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

よう

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

を追加しましたか？ – vel

@vel、既に上に...、私は崩壊したい常にすべての最初のボタンをクリックして隠す。最初のボタンを最初にクリックすると、折りたたみが開いて2回目のクリック、3回目のクリックなど....折りたたみが正しく隠れる...、最初のクリックで問題がある –

jsfiffleでエラーが発生しました ' VM70 bootstrap.min.js：6キャッチされないエラー：ブートストラップのドロップダウンに '.pps.js（https://popper.js.org）が必要です。 – 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崩壊を表示したい場合は... divに崩壊してクラスを追加する＃collapsingDiv、これ以上のjavascript Jqueryは必要ありません... ブートストラップのみ - CSSとjsが必要です... –

私は SEEこのフィドル... は、その作業 https://jsfiddle.net/Gaurav__work/6rwxupb8/7/時に無料コピーの年のフィドル病気にすぐにわかりました –

....ハンドル崩壊のためにJavaScriptを使用して作業フィドル –

この問題は解決され

は....

は、私はちょうど私の質問

出典

2017-09-08 07:48:03

jqueryのブートストラップ崩壊正常に動作していない

答えて

関連する問題