为啥这个下拉菜单点击外部以后还是不能恢复呢？

<!DOCTYPE html>

点击下拉菜单

<br> /* 记得代码分离 <em>/<br> .header-dropbtn {<br> /</em> 对按钮的样式进行总的设置 */<br> border: none;<br> cursor: pointer;<br> }</p> <pre><code> .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; /* 点击恢复 */ } </style> <body> <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>  <script type="text/javascript"> 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); </script> </body> </code></pre> <p></html></p> <pre><code> </code></pre>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

阡路陌人 2018-11-27 02:20

关注

可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .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; /* 点击恢复 */ }
        button{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="header-dropdown">
    <button onclick="dropdown();" class="header-dropbtn"></button>
    <div id="header-dropduwn" class="header-dropdown-content">
        <a href="#">dsadsadsa</a>
        <a href="">dsadsadsadsa</a>
        <a href="">dsadsadsadsad</a>
    </div>
</div>

<script>
    function dropdown()
    { //切换 document.getElementById(&#39;header-dropdown&#39;).classList.toggle(&#39;show&#39;);
        var el = document.getElementById('header-dropbtn'); //需要美化时候:点击增加新的样式 }
        var dropdowns = document.getElementsByClassName('header-dropdown-content')[0];
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.add('show')) {
                openDropdown.classList.remove('show');
            };
        }

    }
    document.querySelector('.header-dropbtn').addEventListener('click', function(e) { 
        document.querySelector('.header-dropdown-content').classList.toggle('show');
        e.stopPropagation(); //阻止冒泡
    }, false);
    document.querySelector('.header-dropdown').addEventListener('click',function(e) {
         e.stopPropagation(); 
    }, false);
    document.addEventListener('click',
function() {
        document.querySelector('.header-dropdown-content').classList.remove('show');
    }, false)
</script>
</body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?