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

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

<!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条回答 默认 最新

相关推荐 更多相似问题