琴& 2018-11-26 06:04 采纳率: 50%
浏览 481
已采纳

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

<!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; /* 点击恢复 */ } &lt;/style&gt; &lt;body&gt; &lt;div class=&quot;header-dropdown&quot;&gt; &lt;button onclick=&quot;dropdown()&quot; class=&quot;header-dropbtn&quot;&gt;下拉菜单&lt;/button&gt; &lt;div id=&quot;header-dropdown&quot; class=&quot;header-dropdown-content&quot;&gt; &lt;a href=&quot;#&quot;&gt;a&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;b&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;c&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- 记得代码分离 --&gt; &lt;script type=&quot;text/javascript&quot;&gt; function dropdown() { //切换 document.getElementById(&#39;header-dropdown&#39;).classList.toggle(&#39;show&#39;); var el = document.getElementById(&#39;header-dropbtn&#39;); //需要美化时候:点击增加新的样式 } var dropdowns = document.getElementsByClassName(&#39;header-dropdown-content&#39;); var i; for (i = 0; i &lt; dropdowns.length; i++) { var openDropdown = dropdown[i]; if (openDropdown.classList.contains(&#39;show&#39;)) { openDropdown.classList.remove(&#39;show&#39;); }; }; document.querySelector(&#39;.header-dropbtn&#39;).addEventListener(&#39;click&#39;, function(e) { document.querySelector(&#39;.header-dropdown&#39;).classList.add(&#39;show&#39;); e.stopPropagation(); //阻止冒泡 }, false); document.querySelector(&#39;.header-dropdown&#39;).addEventListener(&#39;click&#39;, function(e) { e.stopPropagation(); }, false); document.addEventListener(&#39;click&#39;, function() { document.querySelector(&#39;.header-dropdown&#39;).classList.remove(&#39;show&#39;); }, false); &lt;/script&gt; &lt;/body&gt; </code></pre> <p></html></p> <pre><code> </code></pre>
  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码