在使用 Google 的 Material Design 样式库时，有时候会遇到下拉菜单不响应的问题，这个问题相信很多前端开发者都遇到过。这篇文章将介绍如何修复这个问题。
问题的产生原因
在使用 Material Design 样式库时，下拉菜单的触发按钮是一个带有 .dropdown-trigger 类的元素，而下拉菜单列表是由 .dropdown-content 类添加到另一个元素中。然而，这两个元素的父元素不能直接通过 JavaScript 选择器进行获取，需要使用 document.querySelector() 方法或其它类似方法。
然而，当使用 document.querySelector() 时，它只会返回第一个匹配的元素。如果存在多个下拉菜单，我们就需要对每个下拉菜单都使用 document.querySelector() 方法来获取它们的按钮和列表元素。这会导致在其中一个下拉菜单未打开的情况下，另一个下拉菜单就被打开了，从而导致下拉菜单不响应的问题。
修复问题的方法
解决这个问题的一个简单方法是使用 document.querySelectorAll() 方法获取所有的下拉菜单按钮和列表元素，然后为它们分别添加事件监听器。以下是示例代码：
-- -------------------- ---- -------
----- ---------------- - -----------------------------------------------
----- ---------------- - -----------------------------------------------
---------------------------------- ------ -- -
--------------------------------- -- -- -
-- -------------------------------------- --- ------- -
------------------------------------- - --------
- ---- -
------------------------------------- - -------
-
---
---以上代码使用了 querySelectorAll() 方法来获取所有的下拉菜单按钮和列表元素。然后，它为每个按钮添加了一个 'click' 事件监听器，当该按钮被点击时，它会切换下拉菜单列表的显示状态，从而解决了下拉菜单不响应的问题。
总结
在使用 Material Design 样式库时，下拉菜单不响应是一个常见的问题。这个问题的主要原因是获取下拉菜单按钮和列表元素时只使用了一个 document.querySelector() 方法。为了解决这个问题，我们可以使用 document.querySelectorAll() 方法获取所有的下拉菜单按钮和列表元素，然后为它们分别添加事件监听器。以上就是解决下拉菜单不响应问题的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f6e45980a9b385b8edc8c