Search code examples
javascriptcssbootstrap-4transition

Disable dropdown menu transition effect (JS)


there is a transition effect in my dropmenu that i want to completely disable , this is the js code that i think i have to change

    function(e) {
  if ((/input|textarea/i.test(e.target.tagName) ? !(32 === e.which || 27 !== e.which && (40 !== e.which && 38 !== e.which || t(e.target).closest(y).length)) : h.test(e.which)) && (e.preventDefault(), e.stopPropagation(), !this.disabled && !t(this).hasClass(u))) {
    var n = a._getParentFromElement(this),
      i = t(n).hasClass(f);
    if ((i || 27 === e.which && 32 === e.which) && (!i || 27 !== e.which && 32 !== e.which)) {
      var s = t(n).find(I).get();
      if (0 !== s.length) {
        var r = s.indexOf(e.target);
        38 === e.which && r > 0 && r--, 40 === e.which && r < s.length - 1 && r++, r < 0 && (r = 0), s[r].focus()
      }
    } else {
      if (27 === e.which) {
        var o = t(n).find(E)[0];
        t(o).trigger("focus")
      }
      t(this).trigger("click")
    }
  }
}

Solution

  • Possibly a duplicate of this which is a duplicate of this post

    If you don't want to jump over and read, here's the CSS that you should add:

    .collapsing {
        -webkit-transition: none;
        transition: none;
        display: none;
    }
    

    Don't forget to search for an answer first before posting questions.

    EDIT: You're correct that your site is using JS/jQuery to do this. The function is in the my-js.js file and is this function:

    $(document).ready(function(){
        $(".dropdown").hover(            
            function() {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("low");
                $(this).toggleClass('open');        
            },
            function() {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("low");
                $(this).toggleClass('open');       
            }
        );
    });
    

    You can edit the slideDown and slideUp methods to be slideUp(0) (no quotes inside as it's a numeric value) instead of 'slow'. This should essentially disable the animation.