Tôi đang sử dụng bootstrap và tôi muốn thêm hoạt ảnh vào menu thả xuống. Tôi muốn thêm hoạt ảnh vào nó, trượt xuống và sao lưu khi rời khỏi nó. Làm thế nào tôi có thể làm điều này?

Những điều tôi đã thử:

Thay đổi tệp thả xuống Js như thế này:

Làm cách nào để làm cho menu thả xuống của Bootstrap trượt lên xuống mượt mà?

Nếu bạn cập nhật lên Bootstrap 3 (BS3), chúng đã hiển thị rất nhiều sự kiện Javascript rất tốt để gắn kết chức năng mong muốn của bạn vào. Trong BS3, mã này sẽ cung cấp cho tất cả các menu thả xuống của bạn hiệu ứng hoạt ảnh mà bạn đang tìm kiếm:

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Bạn có thể đọc về các sự kiện BS3 tại đây và cụ thể về các sự kiện thả xuống tại đây .

Ngoài ra, có thể tránh sử dụng JavaScript cho hiệu ứng thả xuống và sử dụng chuyển tiếp CSS3, bằng cách thêm đoạn mã nhỏ này vào kiểu của bạn:

.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
    max-height: 300px;
    opacity: 1;
}

Vấn đề duy nhất với cách này là bạn nên chỉ định chiều cao tối đa theo cách thủ công. Nếu bạn đặt một giá trị rất lớn, hoạt ảnh của bạn sẽ rất nhanh.

Nó hoạt động giống như một sự quyến rũ nếu bạn biết chiều cao gần đúng của các menu thả xuống của mình, nếu không, bạn vẫn có thể sử dụng javascript để đặt giá trị chiều cao tối đa chính xác.

Đây là ví dụ nhỏ: DEMO

! Có một lỗi nhỏ với phần đệm trong giải pháp này, hãy kiểm tra nhận xét của Jacob Stamm với giải pháp.

Tôi đang làm điều gì đó như vậy nhưng khi di chuột thay vì nhấp vào .. Đây là mã tôi đang sử dụng, bạn có thể chỉnh sửa nó một chút để nó hoạt động khi nhấp

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

Tôi không biết liệu mình có thể thực hiện chủ đề này hay không, nhưng tôi đã tìm ra cách sửa lỗi nhanh chóng cho lỗi trực quan xảy ra khi lớp đang mở bị xóa quá nhanh. Về cơ bản, tất cả những gì cần làm là thêm chức năng OnComplete bên trong sự kiện slideUp và đặt lại tất cả các lớp và thuộc tính đang hoạt động. Đi đến một cái gì đó như thế này:

Đây là kết quả: Ví dụ về Bootply

Javascript / Jquery:

$(function(){
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

đây là giải pháp của tôi cho hiệu ứng slide & fade:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });

Cập nhật 2018 Bootstrap 4

Trong Boostrap 4, .openlớp đã được thay thế bằng .show. Tôi muốn triển khai điều này chỉ bằng cách sử dụng các chuyển đổi CSS mà không cần thêm JS hoặc jQuery ...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

Demo: https://www.codeply.com/go/3i8LzYVfMF

Lưu ý: max-heightcó thể được đặt thành bất kỳ giá trị lớn nào đủ để chứa nội dung thả xuống.

Khi nhấp vào nó có thể được thực hiện bằng cách sử dụng mã dưới đây

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});

Tôi đang sử dụng mã ở trên nhưng tôi đã thay đổi hiệu ứng trì hoãn bằng slideToggle.

Nó trượt trình đơn thả xuống khi di chuột với hoạt ảnh.

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
    }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
    });

Câu trả lời mở rộng, là câu trả lời đầu tiên của tôi, vì vậy xin lỗi nếu không có đủ chi tiết trước đó.

Đối với Bootstrap 3.x Cá nhân tôi thích hoạt ảnh CSS hơn và tôi đã sử dụng animate.css & cùng với Bootstrap Dropdown Javascript Hooks. Mặc dù nó có thể không mang lại hiệu quả chính xác cho bạn nhưng đây là một cách tiếp cận khá linh hoạt.

Bước 1: Thêm animate.css vào trang của bạn bằng các thẻ head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

Bước 2: Sử dụng HTML Bootstrap tiêu chuẩn trên trình kích hoạt:

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Bước 3: Sau đó thêm 2 thuộc tính dữ liệu tùy chỉnh vào phần tử dropdrop-menu; dữ liệu thả xuống cho hoạt ảnh trong và thả xuống dữ liệu cho hoạt ảnh ngoài. Đây có thể là bất kỳ hiệu ứng animate.css nào như fadeIn hoặc fadeOut

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

Bước 4: Tiếp theo, thêm Javascript sau để đọc các thuộc tính dữ liệu data-dropdown-in / out và phản ứng với các hook / sự kiện của Bootstrap Javascript API ( http://getbootstrap.com/javascript/#dropdowns-events ):

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

Bước 5 (tùy chọn): Nếu bạn muốn tăng tốc hoặc thay đổi hoạt ảnh, bạn có thể làm như vậy với CSS như sau:

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

Đã viết một bài báo với nhiều chi tiết hơn và tải xuống nếu có ai quan tâm: article: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

Hy vọng điều đó hữu ích và bài viết thứ hai này có mức độ chi tiết cần thiết Tom

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

Mã này hoạt động nếu bạn muốn hiển thị danh sách thả xuống khi di chuột.

Tôi vừa thay đổi .slideTogglethành .slideDown& .slideUp, và xóa (400)thời gian

Đây là một giải pháp đơn giản tuyệt vời sử dụng jQueryhoạt động hiệu quả:

$('.dropdown-toggle').click(function () {
    $(this).next('.dropdown-menu').slideToggle(300);
});

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

Chuyển đổi hoạt ảnh slide xảy ra khi nhấp chuột và nó luôn trượt sao lưu khi mất tiêu điểm.

Thay đổi 300giá trị thành bất kỳ thứ gì bạn muốn, số càng thấp thì hoạt ảnh càng nhanh.

Biên tập:

Giải pháp này sẽ chỉ hoạt động đối với chế độ xem trên máy tính để bàn. Nó sẽ cần một số sửa đổi thêm để hiển thị đẹp cho thiết bị di động.

BOOTSTRAP 3 THAM KHẢO

Được thêm vào vì tôi luôn bị giải pháp trong chuỗi này bắt gặp và nó khiến tôi bị nghẹt thở mọi lúc.

Về cơ bản, trình đơn thả xuống của BS ngay lập tức loại bỏ .openlớp khỏi cha mẹ, vì vậy việc trượt lên không hoạt động.

Sử dụng cùng một bit như các giải pháp khác cho slideDown ();

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});

Đối với Bootstrap 3, biến thể này trên các câu trả lời ở trên làm cho slideUp()hoạt ảnh di động mượt mà hơn; các câu trả lời ở trên có hoạt ảnh bị giật vì Bootstrap xóa .openlớp khỏi cha của nút chuyển đổi ngay lập tức, vì vậy mã này khôi phục lớp cho đến khi slideUp()hoạt ảnh kết thúc.

// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970

$('.dropdown')
  .on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  })
  .on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
      $(this).parent().removeClass('open');
    });
  })
  .on('hidden.bs.dropdown', function() {
    $(this).addClass('open');
  });

Sự khác biệt chính:

• Trong hide.bs.dropdowntrình xử lý sự kiện, tôi đang sử dụng .stop()giá trị mặc định của 's ( false) cho đối số thứ hai của nó ( jumpToEnd)
• Trình hidden.bs.dropdownxử lý sự kiện khôi phục .openlớp về cha mẹ của nút bật tắt thả xuống và nó thực hiện điều này khá nhiều ngay sau khi lớp được xóa lần đầu tiên. Trong khi đó slideUp()hoạt ảnh vẫn đang chạy và giống như trong các câu trả lời ở trên, lệnh gọi lại "the-animation-is-complete" của nó chịu trách nhiệm cuối cùng xóa .openlớp khỏi cha của nó.
• Các phương thức được xâu chuỗi với nhau vì bộ chọn cho mỗi trình xử lý sự kiện là giống nhau

Giới thiệu

Tính đến thời điểm viết bài, câu trả lời ban đầu là 8 năm. Tôi vẫn cảm thấy dường như vẫn chưa có một giải pháp thích hợp cho câu hỏi ban đầu.

Bootstrap đã đi một chặng đường dài kể từ đó và bây giờ là 4.5.2 . Câu trả lời này giải quyết chính phiên bản này.

Vấn đề với tất cả các giải pháp khác cho đến nay

Vấn đề với tất cả các câu trả lời khác là, trong khi chúng tham gia vào show.bs.dropdown/ hide.bs.dropdown, các sự kiện tiếp theo shown.bs.dropdown/ hidden.bs.dropdownhoặc được kích hoạt quá sớm (hoạt ảnh vẫn đang diễn ra) hoặc chúng hoàn toàn không kích hoạt vì chúng đã bị chặn ( e.preventDefault()).

Một giải pháp sạch sẽ

Vì việc triển khai show()và hide()trong Dropdownlớp Bootstraps có một số điểm tương đồng, tôi đã nhóm chúng lại với nhau toggleDropdownWithAnimation()khi bắt chước hành vi ban đầu và thêm các hàm trợ giúp QoL nhỏ vào showDropdownWithAnimation()và hideDropdownWithAnimation().
toggleDropdownWithAnimation()tạo một shown.bs.dropdown/ hidden.bs.dropdownsự kiện giống như cách Bootstrap thực hiện. Sự kiện này sau đó được kích hoạt sau khi hoạt ảnh hoàn tất - giống như bạn mong đợi.

/**
 * Toggle visibility of a dropdown with slideDown / slideUp animation.
 * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class.
 * @param {boolean} show Show (true) or hide (false) the dropdown menu.
 * @param {number} duration Duration of the animation in milliseconds
 */
function toggleDropdownWithAnimation($containerElement, show, duration = 300): void {
    // get the element that triggered the initial event
    const $toggleElement = $containerElement.find('.dropdown-toggle');
    // get the associated menu
    const $dropdownMenu = $containerElement.find('.dropdown-menu');
    // build jquery event for when the element has been completely shown
    const eventArgs = {relatedTarget: $toggleElement};
    const eventType = show ? 'shown' : 'hidden';
    const eventName = `${eventType}.bs.dropdown`;
    const jQueryEvent = $.Event(eventName, eventArgs);

    if (show) {
        // mimic bootstraps element manipulation
        $containerElement.addClass('show');
        $dropdownMenu.addClass('show');
        $toggleElement.attr('aria-expanded', 'true');
        // put focus on initial trigger element
        $toggleElement.trigger('focus');
        // start intended animation
        $dropdownMenu
            .stop() // stop any ongoing animation
            .hide() // hide element to fix initial state of element for slide down animation
            .slideDown(duration, () => {
            // fire 'shown' event
            $($toggleElement).trigger(jQueryEvent);
        });
    }
    else {
        // mimic bootstraps element manipulation
        $containerElement.removeClass('show');
        $dropdownMenu.removeClass('show');
        $toggleElement.attr('aria-expanded', 'false');
        // start intended animation
        $dropdownMenu
            .stop() // stop any ongoing animation
            .show() // show element to fix initial state of element for slide up animation
            .slideUp(duration, () => {

            // fire 'hidden' event
            $($toggleElement).trigger(jQueryEvent);
        });
    }
}

/**
 * Show a dropdown with slideDown animation.
 * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class.
 * @param {number} duration Duration of the animation in milliseconds
 */
function showDropdownWithAnimation($containerElement, duration = 300) {
    toggleDropdownWithAnimation($containerElement, true, duration);
}

/**
 * Hide a dropdown with a slideUp animation.
 * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class.
 * @param {number} duration Duration of the animation in milliseconds
 */
function hideDropdownWithAnimation($containerElement, duration = 300) {
    toggleDropdownWithAnimation($containerElement, false, duration);
}

Ràng buộc người nghe sự kiện

Bây giờ chúng ta đã viết các lệnh gọi lại thích hợp để hiển thị / ẩn danh sách thả xuống với hoạt ảnh, hãy thực sự liên kết chúng với các sự kiện chính xác.

Một sai lầm phổ biến mà tôi đã thấy rất nhiều trong các câu trả lời khác là ràng buộc người nghe sự kiện trực tiếp với các phần tử. Mặc dù điều này hoạt động tốt cho các phần tử DOM có mặt tại thời điểm trình xử lý sự kiện được đăng ký, nhưng nó không liên kết với các phần tử được thêm vào sau này.

Đó là lý do tại sao bạn thường tốt hơn nên ràng buộc trực tiếp với document:

$(function () {

    /* Hook into the show event of a bootstrap dropdown */
    $(document).on('show.bs.dropdown', '.dropdown', function (e) {
        // prevent bootstrap from executing their event listener
        e.preventDefault();
        
        showDropdownWithAnimation($(this));
    });

    /* Hook into the hide event of a bootstrap dropdown */
    $(document).on('hide.bs.dropdown', '.dropdown', function (e) {
        // prevent bootstrap from executing their event listener
        e.preventDefault();
          
        hideDropdownWithAnimation($(this));
    });

});