bootstrap的Dropdowns下拉菜单改为鼠标悬停展开

代码如下:

$(document).ready(function(){
      $('.dropdown').hover(
        function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).slideDown(200);
        },
        function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).slideUp(200);
        }
      );
    });

如果想只针对宽度768以上生效,768以下保持默认,这样写:

$(document).ready(function() {
  function toggleDropdownOnHover() {
    if ($(window).width() > 768) {
      $('.dropdown').hover(
        function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).slideDown(200);
        },
        function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).slideUp(200);
        }
      );
    } else {
      $('.dropdown').off('mouseenter mouseleave');
      $('.dropdown-toggle').dropdown(); // 确保默认的 Bootstrap 下拉菜单行为
    }
  }
  toggleDropdownOnHover();

  $(window).resize(function() {
    toggleDropdownOnHover();
  });
});

发表回复