如何将点击触发的Dropdown菜单改为悬停触发？

我来帮你搞定这个问题～原来的代码是靠点击事件来切换下拉菜单的显示/隐藏，咱们只需要把事件换成鼠标悬停相关的，再调整逻辑就可以实现悬停触发啦。

修改后的完整代码 #

JavaScript部分

(function($, undefined) { 
  var open = []; 
  var opts = { 
    selector: '.dropdown', 
    toggle: 'dropdown-toggle', 
    open: 'dropdown-open', 
    nest: true 
  }; 

  // 先移除原来的点击/触摸事件，避免和悬停逻辑冲突
  $(document).off('click.dropdown touchstart.dropdown');

  // 鼠标进入下拉容器时打开菜单
  $(document).on('mouseenter.dropdown', opts.selector, function(e) {
    var $this = $(this);
    if (!$this.hasClass(opts.open)) {
      // 👇 可选：如果希望同一时间只展开一个下拉，取消下面两行注释
      // open.forEach(item => item.removeClass(opts.open));
      // open = [];
      open.push($this.addClass(opts.open));
    }
  });

  // 鼠标离开下拉容器时关闭菜单
  $(document).on('mouseleave.dropdown', opts.selector, function(e) {
    var $this = $(this);
    if ($this.hasClass(opts.open)) {
      // 从已打开列表中移除当前下拉
      const index = open.indexOf($this);
      if (index !== -1) open.splice(index, 1);
      $this.removeClass(opts.open);
    }
  });
})(jQuery);

CSS部分（无需修改，保持原代码即可）

.Row { display: table; width: 100%; table-layout: fixed; border-spacing: 10px; } 
.Column { display: table-cell; background-color: red; } 
.dropdown { position:relative; min-width:100%; background:#ccc; display: inline-block; } 
.dropdown a { display:block; text-decoration:none; color:#333; } 
/* toggle */ .dropdown .dropdown-toggle { padding:0; } 
/* dropdown */ .dropdown-menu { position:absolute; top:100%; right:0; left:0; display:none; margin:0; padding:0; list-style-type:none; background:#ccc; } 
/* options */ .dropdown-menu .option a { } 
.dropdown-menu .option a:hover { background-color:#aaa; } 
/* open */ .dropdown-open { z-index:400; } 
.dropdown-open > .dropdown-menu { display:block; }

HTML部分（修正了重复ID的问题，符合HTML规范）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="Row"> 
  <div class="Column"> 
    <div id="locale1" class="dropdown"> 
      <a href="#locale1" class="dropdown-toggle">English</a> 
      <ul class="dropdown-menu"> 
        <li class="option"><a href="#">French</a></li> 
        <li class="option"><a href="#">German</a></li> 
        <li class="option"><a href="#">Arabic</a></li> 
        <li class="option"><a href="#">Chinese</a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="Column"> 
    <div id="locale2" class="dropdown"> 
      <a href="#locale2" class="dropdown-toggle">English</a> 
      <ul class="dropdown-menu"> 
        <li class="option"><a href="#">French</a></li> 
        <li class="option"><a href="#">German</a></li> 
        <li class="option"><a href="#">Arabic</a></li> 
        <li class="option"><a href="#">Chinese</a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="Column"> 
    <div id="locale3" class="dropdown"> 
      <a href="#locale3" class="dropdown-toggle">English</a> 
      <ul class="dropdown-menu"> 
        <li class="option"><a href="#">French</a></li> 
        <li class="option"><a href="#">German</a></li> 
        <li class="option"><a href="#">Arabic</a></li> 
        <li class="option"><a href="#">Chinese</a></li> 
      </ul> 
    </div> 
  </div> 
</div>

关键修改说明 #

1. 替换事件绑定：移除了原来的click和touchstart事件，换成了mouseenter（鼠标进入）和mouseleave（鼠标离开）事件，直接绑定在.dropdown容器上，逻辑更直观。
2. 调整展开/收起逻辑：鼠标进入时给容器添加dropdown-open类（触发CSS显示菜单），离开时移除该类；同时维护open数组来跟踪已打开的下拉。
3. 可选优化：如果需要同一时间只显示一个下拉菜单，取消JS中对应的注释即可，打开新下拉时会自动关闭之前的。

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