Pertanyaan Twitter Bootstrap Dropdown dengan Tab di dalamnya


Saya mencoba membuat menu tarik-turun dengan tab di dalamnya. Masalahnya adalah dropdown menutup ketika saya mengklik tab. Lihat demo ini: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (kode direproduksi di bawah).

Itu saran yang dikutip untuk stopPropagation() pada jangkar tab tampaknya tidak membantu. Apakah ada cara yang lebih baik?

<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a>           </li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">HOME asdfasdfsda</div>
      <div class="tab-pane" id="profile">PROFILE asdfafas</div>
      <div class="tab-pane" id="messages">MESSAGES asdfdas</div>
    </div>
  </ul>
</div>

4
2018-02-03 10:54


asal


Jawaban:


Gunakan event bootstrap spesifik: hide.bs.dropdown (Dipicu ketika dropdown hampir menutup) memungkinkan Anda membatalkan tindakan "sembunyikan" dengan menelepon e.preventDefault(). (dok disini, daftar acara bootstrap khusus untuk scrolldown komponen)

Anda dapat mengaktifkan bendera khusus ketika pengguna mengklik tab, dan memeriksa bendera itu di hide.bs.dropdown acara pada dropdown:

$('#myTabs').on('click', '.nav-tabs a', function(){
    // set a special class on the '.dropdown' element
    $(this).closest('.dropdown').addClass('dontClose');
})

$('#myDropDown').on('hide.bs.dropdown', function(e) {
    if ( $(this).hasClass('dontClose') ){
        e.preventDefault();
    }
    $(this).removeClass('dontClose');
});

biola
(Saya menambahkan id html ke contoh Anda, ubah pemilih sesuai dengan kebutuhan Anda)


5
2018-02-03 11:15



Saran yang dikutip tidak berhasil karena .tab('show') metode harus dipanggil pada tab yang sebenarnya (mis., tautan) sebagai ganti panel tab.

Jadi kode seharusnya:

$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
    e.stopPropagation()        
    $(this).tab('show')
})

Berikut adalah biola yang diperbarui: http://jsfiddle.net/pv2Lc/6/


11
2018-02-03 11:14