<!DOCTYPE html>
点击下拉菜单
<pre><code> /* 记得代码分离 */ .header-dropbtn { /* 对按钮的样式进行总的设置 */ border: none; cursor: pointer; } .header-dropbtn:hover, .header-dropbtn:focus { /* 对按钮的点击时的,鼠标聚焦的样式设置 */ box-shadow: 0px 1px 10px 1px deepskyblue; } .header-dropdown { /* 对按钮盒子的样式设置,可以添加多个按钮 */ position: relative; display: inline-block; } .header-dropdown-content { display: none; /* 一定要用css进行隐藏 */ position: absolute; /* 相对于按钮大大的位置是绝对的 */ overflow: auto; z-index: 1; } .header-dropdown-content a { /* 对加入的链接的样式 */ text-decoration: none; display: block; // } .header-dropdown a:hover { /* 对下拉菜单中所有链接进行设置 */ } .show { /* 利用js对操作进行的修改 */ display: block; /* 点击恢复 */ } </code></pre> <pre><code></style> <body> </code></pre> <pre><code> <div class="header-dropdown"> <button onclick="dropdown()" class="header-dropbtn">下拉菜单</button> <div id="header-dropdown" class="header-dropdown-content"> <a href="#">a</a> <a href="#">b</a> <a href="#">c</a> </div> </div> </code></pre> <pre><code> <!-- 记得代码分离 --> <script type="text/javascript"> </code></pre> <pre><code> function dropdown() { //切换 document.getElementById('header-dropdown').classList.toggle('show'); var el = document.getElementById('header-dropbtn'); //需要美化时候:点击增加新的样式 } var dropdowns = document.getElementsByClassName('header-dropdown-content'); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdown[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); }; }; document.querySelector('.header-dropbtn').addEventListener('click', function(e) { document.querySelector('.header-dropdown').classList.add('show'); e.stopPropagation(); //阻止冒泡 }, false); document.querySelector('.header-dropdown').addEventListener('click', function(e) { e.stopPropagation(); }, false); document.addEventListener('click', function() { document.querySelector('.header-dropdown').classList.remove('show'); }, false); </code></pre> <pre><code> </script> </body> </code></pre> <p></html></p>
