在JavaScript中，可以使用HTML和CSS来创建下拉菜单。下面是一个简单的示例：
HTML代码：
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">下拉菜单</button> <div id="myDropdown" class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div>CSS代码：
.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); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; }JavaScript代码：
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }在上述代码中，点击按钮时会调用myFunction()函数，该函数会切换下拉菜单的显示状态。window.onclick事件监听器会在点击页面其他地方时关闭下拉菜单。
你可以根据自己的需求进行修改和扩展这个示例。
提供PHP及ThinkPHP框架的定制开发、代码优化，PHP修改、ThinkPHP修改。
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
Tags：
下拉菜单
