बूटस्ट्रैप ड्रॉपडाउन में स्लाइड प्रभाव जोड़ना

Question 1

मैं बूटस्ट्रैप का उपयोग कर रहा हूं , और मैं एक ड्रॉपडाउन में एनीमेशन जोड़ना चाहूंगा। मैं इसमें एक एनीमेशन जोड़ना चाहता हूं, इसे छोड़ते समय स्लाइड और बैक अप लें। मैं ये कैसे करूं?

जिन चीजों की मैंने कोशिश की:

जेएस ड्रॉप डाउन फाइल को इस तरह बदलना:

मैं बूटस्ट्रैप के नेविगेशन ड्रॉपडाउन स्लाइड को आसानी से ऊपर और नीचे कैसे कर सकता हूं?

Question 2

यदि आप बूटस्ट्रैप 3 (बीएस 3) को अपडेट करते हैं, तो उन्होंने बहुत सी जावास्क्रिप्ट घटनाओं को उजागर किया है जो आपकी वांछित कार्यक्षमता को टाई करने के लिए अच्छा है। BS3 में, यह कोड आपके सभी ड्रॉपडाउन मेनू को आपके द्वारा खोजा जा रहा एनीमेशन प्रभाव देगा:

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

आप यहां बीएस 3 घटनाओं के बारे में पढ़ सकते हैं और विशेष रूप से यहां ड्रॉपडाउन घटनाओं के बारे में पढ़ सकते हैं ।

Question 3

इसके अलावा ड्रॉप-डाउन प्रभाव के लिए जावास्क्रिप्ट का उपयोग करने से बचें, और अपनी शैली में कोड के इस छोटे टुकड़े को जोड़कर CSS3 संक्रमण का उपयोग करें:

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

इस तरह से एकमात्र समस्या यह है कि आपको मैन्युअल रूप से अधिकतम-ऊंचाई निर्दिष्ट करनी चाहिए। यदि आप एक बहुत बड़ा मूल्य निर्धारित करते हैं, तो आपका एनीमेशन बहुत जल्दी हो जाएगा।

यह एक आकर्षण की तरह काम करता है यदि आप अपने ड्रॉपडाउन की अनुमानित ऊंचाई जानते हैं, अन्यथा आप अभी भी सटीक अधिकतम-ऊंचाई मान सेट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

यहाँ छोटा उदाहरण है: DEMO

! इस समाधान में पैडिंग के साथ छोटी बग है, समाधान के साथ जैकब स्टैम की टिप्पणी की जांच करें।

Question 4

मैं ऐसा कुछ कर रहा हूं, लेकिन क्लिक करने के बजाय होवर पर .. यह वह कोड है जिसका मैं उपयोग कर रहा हूं, आप इसे क्लिक पर काम करने के लिए इसे थोड़ा ट्विक करने में सक्षम हो सकते हैं।

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

Question 5

मुझे नहीं पता कि क्या मैं इस धागे को उछाल सकता हूं, लेकिन मुझे दृश्य बग के लिए एक त्वरित समाधान का पता चला है जो तब होता है जब खुली कक्षा को बहुत तेजी से हटा दिया जाता है। मूल रूप से, यह सब करने के लिए स्लाइडअप घटना के अंदर एक OnComplete फ़ंक्शन को जोड़ना और सभी सक्रिय वर्गों और विशेषताओं को रीसेट करना है। कुछ इस तरह से जाता है:

यहाँ परिणाम है: बूटप्ले उदाहरण

जावास्क्रिप्ट / जक्वरी:

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

Question 6

यहाँ स्लाइड और फीका प्रभाव के लिए मेरा समाधान है:

   // 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:''});
      });
   });

Question 7

अपडेट 2018 बूटस्ट्रैप 4

Boostrap 4 में, .openक्लास को बदल दिया गया है .show। मैं अतिरिक्त CSS या jQuery की आवश्यकता के बिना केवल CSS बदलावों का उपयोग करके इसे लागू करना चाहता था ...

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

डेमो: https://www.codeply.com/go/3i8LzYVfMF

नोट: max-heightड्रॉपडाउन सामग्री को समायोजित करने के लिए किसी भी बड़े मूल्य पर सेट किया जा सकता है।

Question 8

क्लिक करने पर इसे नीचे दिए गए कोड का उपयोग करके किया जा सकता है

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

Question 9

मैं ऊपर दिए गए कोड का उपयोग कर रहा हूं, लेकिन मैंने स्लाइडटॉगल द्वारा देरी के प्रभाव को बदल दिया है।

यह एनीमेशन के साथ होवर पर ड्रॉपडाउन को स्लाइड करता है।

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

Question 10

विस्तारित जवाब, क्या मेरा पहला जवाब था, अगर कोई पर्याप्त विस्तार नहीं हुआ था।

बूटस्ट्रैप 3.x के लिए, मैं व्यक्तिगत रूप से CSS एनिमेशन को पसंद करता हूं और मैं ast.css का उपयोग कर रहा हूं और बूटस्ट्रैप ड्रॉपडाउन जावास्क्रिप्ट हुक के साथ। हालांकि यह बिल्कुल प्रभाव नहीं हो सकता है क्योंकि यह एक सुंदर लचीला दृष्टिकोण है।

चरण 1: शीर्षक के साथ अपने पृष्ठ पर animate.css जोड़ें:

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

चरण 2: ट्रिगर पर मानक बूटस्ट्रैप HTML का उपयोग करें:

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

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

चरण 3: फिर ड्रॉपड्रॉप-मेनू तत्व में 2 कस्टम डेटा विशेषताएँ जोड़ें; एनीमेशन के लिए डेटा-ड्रॉपडाउन-इन और आउट-एनीमेशन के लिए डेटा-ड्रॉपडाउन-आउट। ये fadeIn या fadeOut जैसे किसी भी चेतन .cs प्रभाव हो सकते हैं

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

चरण 4: डेटा-ड्रॉपडाउन-इन / आउट डेटा विशेषताओं को पढ़ने के लिए अगला जावास्क्रिप्ट जोड़ें और बूटस्ट्रैप जावास्क्रिप्ट एपीआई हुक / घटनाओं पर प्रतिक्रिया दें ( 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');
      }); 
    }    
  }, 
});

चरण 5 (वैकल्पिक): यदि आप एनीमेशन को गति देना या बदलना चाहते हैं, तो आप निम्नलिखित की तरह CSS के साथ ऐसा कर सकते हैं:

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

अधिक विवरण और यदि कोई दिलचस्पी रखता है तो एक डाउनलोड के साथ एक लेख लिखा: लेख: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

आशा है कि उपयोगी है और इस दूसरे लेखन में टॉम के लिए आवश्यक विवरण का स्तर है

Question 11

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

यदि आप होवर पर ड्रॉपडाउन प्रकट करना चाहते हैं तो यह कोड काम करता है।

अभी-अभी बदली .slideToggleकरने के लिए .slideDownऔर .slideUp, और हटाया (400)समय

Question 12

यहाँ एक अच्छा सरल उपाय है jQueryजो अच्छी तरह से काम करता है:

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

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

स्लाइड एनीमेशन टॉगल क्लिक करने पर होता है और यह हमेशा फ़ोकस खोने पर वापस स्लाइड करता है।

जिस 300चीज को आप चाहते हैं उसके मूल्य को बदल दें , एनिमेशन जितनी तेज़ी से कम होगा।

संपादित करें:

यह समाधान केवल डेस्कटॉप दृश्यों के लिए काम करेगा। मोबाइल के लिए अच्छी तरह से प्रदर्शित करने के लिए इसे कुछ और संशोधन की आवश्यकता होगी।

Question 13

BOOTSTRAP 3 संदर्भ

मुझे इसलिए जोड़ा गया क्योंकि मैं इस धागे में हल को पकड़े रहता हूं और यह मुझे हर बार भर देता है।

मूल रूप से बीएस ड्रॉपडाउन तुरंत .openमाता-पिता से कक्षा को हटा देता है , इसलिए फिसलने से काम नहीं होता है।

स्लाइडडाउन के लिए अन्य समाधानों के समान ही उपयोग करें ();

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

Question 14

पहचान

लेखन के समय तक, मूल उत्तर अब 8 वर्ष का है। फिर भी मुझे लगता है कि मूल प्रश्न का कोई उचित समाधान नहीं है।

बूटस्ट्रैप तब से बहुत आगे बढ़ चुका है और अब 4.5.2 पर है । यह उत्तर इस संस्करण को संबोधित करता है।

अब तक के अन्य सभी समाधानों के साथ समस्या

अन्य सभी उत्तरों के साथ मुद्दा यह है कि, जब वे show.bs.dropdown/ में हुक करते हैं hide.bs.dropdown, तो अनुवर्ती घटनाओं shown.bs.dropdown/ hidden.bs.dropdownको या तो बहुत जल्दी निकाल दिया जाता है (एनीमेशन अभी भी चल रहा है) या वे बिल्कुल भी आग नहीं लगाते क्योंकि वे दबाए गए थे ( e.preventDefault())।

एक साफ समाधान

के कार्यान्वयन के बाद show()और hide()Bootstraps में Dropdownवर्ग शेयर कुछ समानताएं हैं, मैं उन्हें एक साथ समूह में बांटा गया है toggleDropdownWithAnimation()जब करने के लिए मूल व्यवहार और कहा कि थोड़ा QOL सहायक कार्यों mimicing showDropdownWithAnimation()और hideDropdownWithAnimation()। उसी तरह से
toggleDropdownWithAnimation()एक shown.bs.dropdown/ hidden.bs.dropdownघटना बनाता है जैसे बूटस्ट्रैप करता है। एनीमेशन पूरा होने के बाद इस घटना को निकाल दिया जाता है - जैसे आप उम्मीद करेंगे।

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

बिंद घटना श्रोता

अब जब हमने एक एनीमेशन के साथ एक ड्रॉपडाउन को छिपाने / छिपाने के लिए उचित कॉलबैक लिखा है, तो वास्तव में इनको सही घटनाओं से बांधें।

एक सामान्य गलती जो मैंने अन्य उत्तरों में बहुत देखी है, वह सीधे इवेंट श्रोताओं को तत्वों के लिए बाध्य कर रही है। यद्यपि यह उस समय मौजूद ईवेंट तत्वों के लिए ठीक काम करता है जब ईवेंट श्रोता पंजीकृत होता है, यह बाद में जोड़े गए तत्वों के लिए बाध्य नहीं होता है।

यही कारण है कि आप आम तौर पर सीधे बंधन से बेहतर होते हैं 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));
    });

});

Question 15

बूटस्ट्रैप 3 के लिए, ऊपर दिए गए उत्तरों पर यह भिन्नता मोबाइल slideUp()एनीमेशन को आसान बनाती है; ऊपर दिए गए उत्तर में चॉपी एनीमेशन है क्योंकि बूटस्ट्रैप .openक्लास को टॉगल के माता-पिता से तुरंत हटा देता है , इसलिए यह कोड slideUp()एनीमेशन को समाप्त होने तक कक्षा को पुनर्स्थापित करता है।

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

मुख्य अंतर:

में hide.bs.dropdown ईवेंट हैंडलर मैं उपयोग कर रहा हूँ .stop()के डिफ़ॉल्ट मान ( false) ने अपने दूसरे तर्क के लिए ( jumpToEnd)
hidden.bs.dropdownईवेंट हैंडलर पुनर्स्थापित करता .openलटकती टॉगल के माता-पिता के लिए वर्ग है, और यह काफी तुरंत बाद वर्ग पहले हटा दिया गया है करता है। इस बीच slideUp()एनीमेशन अभी भी चल रहा है, और ऊपर दिए गए उत्तरों की तरह, इसका "एनीमेशन-एनीमेशन-इस-पूरा" कॉलबैक अंत में .openअपने माता-पिता से कक्षा को हटाने के लिए जिम्मेदार है ।
तरीकों को एक साथ जंजीर किया जाता है क्योंकि प्रत्येक ईवेंट हैंडलर के लिए चयनकर्ता समान है