Twitter Bootstrap açılır menüsünü gizleme

Bu can sıkıcı hale geliyor - bir Bootstrap açılır listesindeki bir öğeye tıkladığımda, açılır menü kapanmıyor. Açılır öğeyi tıkladığınızda bir Facebox ışık kutusunu açacak şekilde ayarladım, ancak bununla ilgili bir sorun var.

Ne denedim

Öğe tıklandığında şunu yapmayı denedim:

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

Bu onu gizler, ama sonra nedense bir daha açılmayacaktır.

Gördüğünüz gibi z-index, açılır menüye gerçekten ihtiyacım var, çünkü açık kaldığında berbat görünüyor (esas olarak, açılır menünün Facebox modal kutusu kaplamasından daha yüksek olması nedeniyle .

Bootstrap'in yerleşik kalıcı kutusunu neden kullanmıyorum

Bootstrap'te yerleşik olarak bulunan hoş görünümlü kalıcı kutuyu neden kullanmadığımı merak ediyorsanız , bunun nedeni:

1. AJAX ile içerisine içerik yüklemenin bir yolu yoktur.
2. Modal için her defasında HTML yazmanız gerekir; Facebox ile şunları yapabilirsiniz:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Canlandırmak için CSS3 animasyonları kullanır (ki bu çok hoş görünür), ancak CSS3 olmayan tarayıcılarda sadece gösterir, ki bu o kadar da hoş görünmez; Facebox, tüm tarayıcılarda çalışabilmesi için JavaScript'i kullanarak kararır.

Bunu dene:

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

Bu sizin için de işe yarayabilir:

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

Buradaki seçeneklerin çoğunu denedim ama hiçbiri benim için gerçekten işe yaramadı. ( $('.dropdown.open').removeClass('open');bunu gizledi, ancak başka herhangi bir şeyi tıklamadan önce fareyle üzerine geldiyseniz, tekrar ortaya çıktı.

bu yüzden bunu bir $("body").trigger("click")

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

Bootstrap 4 (Ekim 2018):

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

Sadece $('.dropdown.open').removeClass('open');açılır menüyü gizleyen ikinci satırı kaldırmanız gerekir .

Bu, aşağıda gösterildiği gibi bağlantı etiketine data-toggle = "dropdown" özniteliğini ekleyerek JavaScript kodu yazmadan yapılabilir :

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

Bu benim için çalıştı:

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

Seçilen cevap benim için işe yaramadı, ancak bunun Bootstrap'in yeni sürümü yüzünden olduğunu düşünüyorum. Bunu yazdım:

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

Umarım bu, gelecekte başka birine yardımcı olur.

Bunu dene!

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

VEYA

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

Her zaman benim için çalışıyor.

Neden benim yöntemimi kullanmalıyım, çünkü kullanıcı div dışına çıkarsa, bu yöntem kullanıcıya alt menüler kaybolmadan önce belirli bir gecikme sağlar. Tıpkı süper balık eklentisini kullanmak gibi.

1) İlk indirme üzerine gelme amacı javascript

Buraya bağlantı kurun: Fareyle üzerine gelme amacı javascript

2) İşte çalıştırılacak kodum

$(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');

Belgeleri okumak ve JavaScript kullanmak, geçiş yöntemi kullanılarak yapılabilir:

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

Bunu şu adreste okuyabilirsiniz: http://getbootstrap.com/javascript/#dropdowns-methods

HTML'yi Bootstrap Modal ile açmayı deneyin, bu kodu kullanıyorum:

$(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);
              }
              });
         })
     });
}); 

ve bağlantı şöyle:

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

İşte düğme açılır menüsünün nasıl kapatılacağı ve düğmenin nasıl değiştirileceği ile ilgili çözümüm:

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

"Bu", düğme grubunun global bir kapsayıcısıdır.

Önyükleme 4.1:

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

bu benim için çalıştı, bir gezinme çubuğum ve birkaç açılır menülerim vardı.

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

Bunu yapmanın en kolay yolu: bir gizleme etiketi eklemenizdir:

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

sonra açılır listeyi her gizlemek istediğinizde şunları ararsınız:

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

Bunun kimseye yardımcı olup olmayacağını bilmiyorum (belki benim durumuma çok özeldir ve bu soruya değil) ama benim için bu işe yaradı:

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

Tıkladıktan sonra:

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

Bağlantı etiketinde class = "dropdown-toggle" kullanın, ardından bağlantı etiketine tıkladığınızda önyükleme açılır menüsünü kapatacaktır.

Hey bu basit jQuery numarası yardımcı olmalı.

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

Kolay yol:

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

bu kodu mevcut olay işleyicinizde kullanabilirsiniz

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

senaryomda ajax çağrısı tamamlandığında kullandım

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;
});

Özniteliğe göre seçmek yavaş yoldur. Açılan açılır menüyü gizlemek için en hızlı çözüm şu şekildedir:

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

veya açılır menü sonraki alt öğe değilse aşağıdakileri kullanın (en yakın üst açılır menü denetimini bulun):

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

O (gerçi bu özellik olduğu geçmişe bakıldığında eklenmiş olabilir değil belgelenmiş bile Bootstrap 4.3.1 yılında,), ancak sadece bir ile diyebilirsin hideparametresi. Sadece onu geçiş elemanında çağırdığınızdan emin olun. Şöyle:

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

Tabii ki, bu da tersine çalışır show.