Cách ẩn menu thả xuống Twitter Bootstrap

Điều này đang trở nên khó chịu - khi tôi nhấp vào một mục trong trình đơn thả xuống Bootstrap, trình đơn thả xuống không đóng lại. Tôi đã thiết lập nó để mở hộp đèn Facebox khi bạn nhấp vào mục thả xuống nhưng có vấn đề với nó.

Những gì tôi đã thử

Khi mục được nhấp vào, tôi đã thử làm điều này:

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

Điều đó ẩn nó đi, nhưng vì một số lý do nó sẽ không mở lại.

Như bạn có thể thấy, tôi thực sự cần menu thả xuống để đóng lại, vì nó trông rất tồi tệ khi nó vẫn mở (chủ yếu là do z-indexmenu thả xuống cao hơn lớp phủ hộp phương thức Facebox.

Tại sao tôi không sử dụng hộp phương thức tích hợp sẵn của Bootstrap

Nếu bạn đang thắc mắc tại sao tôi không sử dụng hộp phương thức đẹp mắt được tích hợp trong Bootstrap , thì đó là vì:

1. Nó không có cách nào để tải nội dung vào nó bằng AJAX.
2. Bạn phải nhập HTML mỗi lần cho phương thức; với Facebox, bạn có thể thực hiện một cách đơn giản:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Nó sử dụng hoạt ảnh CSS3 để tạo hoạt ảnh (trông rất đẹp) nhưng trong các trình duyệt không phải CSS3, nó chỉ hiển thị, trông không đẹp cho lắm; Facebox sử dụng JavaScript để mờ dần nên nó hoạt động trên tất cả các trình duyệt.

Thử cái này:

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

Điều này cũng có thể làm việc cho bạn:

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

đã thử hầu hết các tùy chọn từ đây nhưng không ai trong số họ thực sự phù hợp với tôi. ( $('.dropdown.open').removeClass('open');đã ẩn nó đi, nhưng nếu bạn lướt qua trước khi nhấp vào bất kỳ thứ gì khác, nó sẽ hiển thị trở lại.

vì vậy tôi cố gắng làm điều đó $("body").trigger("click")

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

Bootstrap 4 (tháng 10 năm 2018):

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

Điều này có thể được thực hiện mà không cần viết mã JavaScript bằng cách thêm thuộc tính data-toggle = "dropdown" vào thẻ liên kết như được hiển thị bên dưới:

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

Bạn chỉ cần $('.dropdown.open').removeClass('open');xóa dòng thứ hai ẩn menu thả xuống.

Đây là những gì làm việc cho tôi:

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

Câu trả lời đã chọn không phù hợp với tôi, nhưng tôi nghĩ đó là do phiên bản Bootstrap mới hơn. Tôi đã kết thúc bài viết này:

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

Hy vọng rằng điều đó sẽ hữu ích cho người khác trong tương lai.

Thử cái này!

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

HOẶC LÀ

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

Nó luôn luôn làm việc cho tôi.

Tại sao lại sử dụng phương pháp của tôi, bởi vì nếu người dùng thoát ra khỏi div, thì metod này sẽ cho phép người dùng có một khoảng thời gian trễ nhất định trước khi tiêu diệt menu con. Nó giống như sử dụng plugin superfish.

1) Đầu tiên tải xuống javascript mục đích di chuột

Liên kết ở đây: javascript có ý định di chuột

2) Đây là mã của tôi để thực thi

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

Việc đọc tài liệu và sử dụng JavaScript có thể được thực hiện bằng cách sử dụng phương pháp chuyển đổi:

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

Bạn có thể đọc về nó trong: http://getbootstrap.com/javascript/#dropdowns-methods

Hãy thử mở HTML bằng Bootstrap Modal, tôi sử dụng mã này:

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

và liên kết như thế này:

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

Đây là giải pháp của tôi về cách đóng trình đơn thả xuống của nút và chuyển đổi nút:

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

Trong đó "cái này" là vùng chứa chung của nhóm nút.

Bootstrap 4.1:

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

điều này làm việc cho tôi, tôi có một thanh điều hướng và một số menu kéo xuống.

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

Cách dễ nhất để làm điều này là: bạn thêm một nhãn ẩn:

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

thì mỗi khi bạn muốn ẩn menu thả xuống, bạn gọi:

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

Không biết liệu điều này có giúp ích được ai không (có thể nó quá cụ thể đối với trường hợp của tôi và không phải đối với câu hỏi này) nhưng đối với tôi, điều này đã hiệu quả:

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

Sau khi bấm:

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

Sử dụng class = "dropdown-toggle" trên thẻ anchor, sau đó khi bạn nhấp vào thẻ anchor, nó sẽ đóng trình đơn bootstrap thả xuống.

Này, thủ thuật jQuery đơn giản này sẽ hữu ích.

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

Cách phục sinh:

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

bạn có thể sử dụng mã này trong trình xử lý sự kiện hiện tại của mình

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

trong kịch bản của tôi, tôi đã sử dụng khi hoàn tất cuộc gọi ajax

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

Lựa chọn theo thuộc tính là cách chậm. Đây là giải pháp nhanh nhất để ẩn menu thả xuống đã mở:

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

hoặc sử dụng sau, nếu .dropdown-menu không phải là phần tử con tiếp theo (tìm điều khiển thả xuống gốc gần nhất):

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

Nó có thể đã được thêm vào khi nhìn lại (mặc dù, tính năng đó không được ghi lại , ngay cả trong Bootstrap 4.3.1), nhưng bạn có thể chỉ cần gọi nó bằng một hidetham số. Chỉ cần đảm bảo gọi nó trên phần tử toggler. Như vậy:

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

Tất nhiên, điều này cũng hoạt động ngược lại với show.