首页js下拉菜单框代码示例

js下拉菜单框代码示例

时间: 2023-08-02 10:11:03 浏览: 104

以下是一个使用 JavaScript 实现下拉菜单框的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } </style> </head> <body> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div> <script> // 点击下拉按钮时展开/折叠下拉菜单 document.querySelector(".dropbtn").addEventListener("click", function() { var dropdownContent = this.nextElementSibling; dropdownContent.style.display = dropdownContent.style.display === "block" ? "none" : "block"; }); </script> </body> </html> ``` 在上面的示例中，我们使用了 CSS 来定义下拉菜单的样式，并使用 JavaScript 来实现展开/折叠下拉菜单的功能。点击下拉按钮时，通过 JavaScript 的事件监听器，切换下拉菜单内容的显示状态。希望这个示例对您有所帮助！如有其他问题，请随时提问。

阅读全文