琴&
2018-11-26 06:04
采纳率: 75%
浏览 476

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

<!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>
    
    已采纳该答案
    打赏 评论
  • toumakazusa0528 2018-11-26 06:35

    你看看是不是这样。自己多注意细节上的东西。还有你复制的代码好乱。我理了半天

     <!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').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>
    </html>
    
    打赏 评论
  • 琴& 2018-11-28 05:50

    额,不知道为啥,复制上去还好好的,提交就好乱了。

    打赏 评论

相关推荐 更多相似问题