多个下拉列表间的显示与隐藏切换是个挺常见的交互。

multi-dropdowns-1

是的,我最近遇到了这样的需求。

multi-dropdowns-2

完成这个需求的过程中,借鉴和尝试了几种方法,有利也有弊。

变量

JS Bin on jsbin.com

优点:

  • 粗暴简单。

缺点:

  • 得维护多个变量;
  • 多个下拉菜单之间耦合。

隐形 Overlay

JS Bin on jsbin.com

优点:

  • 多个下拉菜单之间解耦。

缺点:

  • 需要注意 z-index 问题;
  • 多余的 DOM 结构。

click 事件处理

JS Bin on jsbin.com

优点:

  • 多个下拉菜单之间解耦。

缺点:

  • 需要处理绑定 addEventListener 元素与 event.target 之间的逻辑。

以上。