如何在jQuery DataTables中实现鼠标悬停而非点击显示/隐藏导出菜单

默认情况下，DataTables的导出集合按钮依赖点击事件触发下拉菜单。要改成鼠标悬停触发，可通过以下步骤实现：

1. 初始化表格时给导出按钮添加自定义类
   在Buttons配置中为导出集合按钮添加自定义class，方便后续精准选择元素：

   $('#your-table-id').DataTable({
     dom: 'Bfrtip',
     buttons: [
       {
         extend: 'collection',
         text: '导出',
         className: 'export-dropdown-trigger', // 自定义类名
         buttons: ['copy', 'excel', 'csv', 'pdf', 'print']
       }
     ]
   });
   

2. 绑定鼠标事件控制菜单显示/隐藏
   通过事件监听实现悬停显示、离开隐藏的逻辑，同时处理菜单区域的hover状态，避免鼠标从按钮移到菜单时菜单意外消失：

   // 悬停导出按钮时触发菜单显示
   $('.export-dropdown-trigger').on('mouseenter', function() {
     $(this).trigger('click'); // 复用默认点击逻辑显示菜单
   });
   
   // 离开导出按钮时延迟判断是否隐藏菜单
   $('.export-dropdown-trigger').on('mouseleave', function() {
     const $menu = $(this).next('.dt-button-collection');
     setTimeout(() => {
       if (!$menu.is(':hover')) {
         $menu.hide();
       }
     }, 100); // 延迟处理过渡间隙问题
   });
   
   // 鼠标进入菜单区域时保持显示
   $(document).on('mouseenter', '.dt-button-collection', function() {
     $(this).show();
   });
   
   // 鼠标离开菜单区域时隐藏
   $(document).on('mouseleave', '.dt-button-collection', function() {
     $(this).hide();
   });
   
   // 可选：禁用原点击触发逻辑（若不需要点击也能显示菜单）
   $('.export-dropdown-trigger').on('click', function(e) {
     e.preventDefault();
     e.stopPropagation();
   });
   

补充说明 #

• 自定义类export-dropdown-trigger用于避免影响页面中其他DataTables按钮。
• 延迟判断的setTimeout是为了处理鼠标从按钮到菜单的过渡间隙，提升交互流畅度。
• 若需要保留点击触发菜单的功能，可移除最后一段禁用点击事件的代码。

内容的提问来源于stack exchange，提问作者user18048414