Cara menyembunyikan dropdown Twitter Bootstrap

Ini semakin menjengkelkan - ketika saya mengklik item di dropdown Bootstrap, dropdown tidak menutup. Saya sudah menyiapkannya untuk membuka lightbox Facebox saat Anda mengklik item dropdown tetapi ada masalah dengannya.

Apa yang telah saya coba

Saat item diklik, saya mencoba melakukan ini:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

Itu menyembunyikannya, tapi karena alasan tertentu itu tidak akan terbuka lagi.

Seperti yang Anda lihat, saya sangat membutuhkan dropdown untuk ditutup, karena terlihat jelek ketika tetap terbuka (terutama karena z-indexdropdown lebih tinggi daripada tampilan kotak modal Facebox.

Mengapa saya tidak menggunakan kotak modal bawaan Bootstrap

Jika Anda bertanya-tanya mengapa saya tidak menggunakan kotak modal yang tampak bagus yang dibangun pada Bootstrap , itu karena:

1. Itu tidak memiliki cara untuk memuat konten ke dalamnya dengan AJAX.
2. Anda harus mengetik HTML setiap kali untuk modal; dengan Facebox Anda dapat melakukan hal sederhana:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Ia menggunakan animasi CSS3 untuk menganimasikan (yang terlihat sangat bagus) tetapi di browser non-CSS3 itu hanya ditampilkan, yang tidak terlihat bagus; Facebox menggunakan JavaScript untuk memudar sehingga berfungsi di semua browser.

Coba ini:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

Ini mungkin juga berhasil untuk Anda:

$('[data-toggle="dropdown"]').parent().removeClass('open');

mencoba sebagian besar opsi dari sini tetapi tidak ada yang benar-benar berhasil untuk saya. (itu$('.dropdown.open').removeClass('open'); memang menyembunyikannya, tetapi jika Anda mengarahkan mouse sebelum mengklik apa pun, itu akan muncul lagi.

jadi saya akhirnya melakukannya dengan a $("body").trigger("click")

$('.open').removeClass('open');

Bootstrap 4 (Oktober 2018):

$('.show').removeClass('show');

Anda hanya perlu $('.dropdown.open').removeClass('open');menghapus baris kedua yang menyembunyikan menu dropdown.

Ini dapat dilakukan tanpa menulis kode JavaScript dengan menambahkan atribut data-toggle = "dropdown" ke dalam tag anchor seperti yang ditunjukkan di bawah ini:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Inilah yang berhasil untuk saya:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Jawaban yang dipilih tidak berhasil untuk saya, tetapi saya pikir itu karena versi Bootstrap yang lebih baru. Saya akhirnya menulis ini:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Semoga bermanfaat bagi orang lain di masa depan.

Coba ini!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

ATAU

$(clicked_element).trigger("click");

Itu selalu berhasil untuk saya.

Mengapa menggunakan metode saya, karena jika pengguna keluar dari div, metod ini memungkinkan pengguna penundaan tertentu sebelum submenu menghilang. Ini seperti menggunakan plugin superfish.

1) Pertama unduh javascript maksud hover

Tautkan di sini: Javascript maksud arahkan kursor

2) Ini kode saya untuk dieksekusi

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

Membaca dokumentasi dan menggunakan JavaScript, ini dapat dilakukan dengan metode sakelar:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

Anda dapat membacanya di: http://getbootstrap.com/javascript/#dropdowns-methods

Coba buka HTML dengan Bootstrap Modal, saya menggunakan kode ini:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

dan tautannya seperti ini:

<a href="#my_page" data-toggle="modal">PAGE</a>

Berikut adalah solusi saya tentang cara menutup dropdown tombol dan mengaktifkan tombol:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Di mana "ini" adalah wadah global dari grup tombol.

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

ini berhasil untuk saya, saya memiliki navbar dan beberapa menu pulldown.

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Cara termudah untuk melakukannya adalah: Anda menambahkan label sembunyikan:

<label class="hide_dropdown" display='hide'></label>

lalu setiap kali Anda ingin menyembunyikan dropdown, Anda memanggil:

$(".hide_dropdown").trigger('click');

Tidak tahu apakah ini akan membantu siapa pun (mungkin terlalu spesifik untuk kasus saya, dan bukan untuk pertanyaan ini) tetapi bagi saya ini berhasil:

$('.input-group.open').removeClass('open');

Setelah klik:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Gunakan class = "dropdown-toggle" pada tag anchor, lalu saat Anda mengklik tag anchor, dropdown bootstrap akan ditutup.

Hei trik jQuery sederhana ini akan membantu.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Cara termudah:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Anda dapat menggunakan kode ini di event handler Anda saat ini

$('.in,.open').removeClass('in open');

dalam skenario saya, saya menggunakan saat panggilan ajax selesai

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Memilih berdasarkan atribut adalah cara yang lambat. Berikut adalah solusi paling cepat untuk menyembunyikan dropdown yang dibuka:

$(".dropdown-menu.show").parent().dropdown("toggle");

atau gunakan yang berikut, jika .dropdown-menu bukan elemen turunan berikutnya (temukan kontrol drop-down induk terdekat):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Ini mungkin telah ditambahkan dalam retrospeksi (meskipun, fitur itu tidak didokumentasikan , bahkan di Bootstrap 4.3.1), tetapi Anda cukup memanggilnya dengan hideparameter. Pastikan untuk memanggilnya di elemen toggler. Seperti:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Tentu saja, ini juga berlaku sebaliknya show.