通过单击链接打开和关闭 div 并按 X 按钮关闭

Question

我创建了并且它运行良好但它只运行一次，意思是通过点击“订阅交易警报”链接一个 div 框打开并说订阅并有一个 x 标记来关闭该 div，但在关闭后如果我再次通过单击相同的链接打开一个 div，它第二次不起作用。 我希望它无限运行。

继承人的代码：

 .trade-alert { width: 180px; height: 26px; display: inline-block; vertical-align: top; box-sizing: border-box; color: #333; } .subscription-trade-alert-box { width: 423px; height: 177px; border: 1px solid #DAE2ED; box-shadow: 2px 2px 5px rgba(83,100,122,.35); background-color: #fff; overflow: hidden; display: none; position: relative; left: 200px; } .close { cursor: pointer; position: absolute; top: 10px; right: 10px; display: block; transform: translate(0%, -50%); color: #333; font-size: 16px; font-family: 'Roboto', sans-serif; } .scc-trade-alert-tips { width: 180px; height: 16px; display: inline-block; position: relative; font-size: 14px; line-height: 16px; padding: 5px 5px 5px 25px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 25px; color: #1686CC; cursor: pointer; vertical-align: baseline; box-sizing: border-box; font-family: 'Roboto', sans-serif; } .tips-icon-mail { width: 16px; height: 16px; position: absolute; left: 5px; top: 2px; width: 16px; height: 16px; background: url(images/mail-ta.png) no-repeat 0 -25px; font-family: 'Roboto', sans-serif; } .trade-alert-focus-anchor:focus .subscription-trade-alert-box { display: block; }

 <a class="trade-alert-focus-anchor" href="#"> <div class="trade-alert"> <div class="scc-trade-alert-tips"> <i class="tips-icon-mail" ></i> Subscribe to Trade Alert </div> </div> <div class="subscription-trade-alert-box"> <span class="close">&times;</span> Subscribe </div> <script> var closebtns = document.getElementsByClassName("close"); var i; for (i = 0; i < closebtns.length; i++) { closebtns[i].addEventListener("click", function() { this.parentElement.style.display = 'none'; }); } </script> </a>

如何让这个无限打开和关闭。

Answer 1

我修复了它多次打开而没有改变太多的问题：1st 我将 Box subscription-trade-alert-box更改为 ID 而不是类。 第二，我修复了 CSS 中从 Class 到 ID 的更改 第三我为订阅链接添加了一个 onclick 事件第四添加了一个 JS 行，订阅框样式显示：单击时设置块。

 var closebtns = document.getElementsByClassName("close"); var i; for (i = 0; i < closebtns.length; i++) { closebtns[i].addEventListener("click", function() { this.parentElement.style.display = 'none'; }); } function showBox() { document.getElementById("subscription-trade-alert-box").style.display = "block"; }

 .trade-alert { width: 180px; height: 26px; display: inline-block; vertical-align: top; box-sizing: border-box; color: #333; } #subscription-trade-alert-box { width: 423px; height: 177px; border: 1px solid #DAE2ED; box-shadow: 2px 2px 5px rgba(83,100,122,.35); background-color: #fff; overflow: hidden; display: none; position: relative; left: 200px; } .close { cursor: pointer; position: absolute; top: 10px; right: 10px; display: block; transform: translate(0%, -50%); color: #333; font-size: 16px; font-family: 'Roboto', sans-serif; } .scc-trade-alert-tips { width: 180px; height: 16px; display: inline-block; position: relative; font-size: 14px; line-height: 16px; padding: 5px 5px 5px 25px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 25px; color: #1686CC; cursor: pointer; vertical-align: baseline; box-sizing: border-box; font-family: 'Roboto', sans-serif; } .tips-icon-mail { width: 16px; height: 16px; position: absolute; left: 5px; top: 2px; width: 16px; height: 16px; background: url(images/mail-ta.png) no-repeat 0 -25px; font-family: 'Roboto', sans-serif; } .trade-alert-focus-anchor:focus #subscription-trade-alert-box { display: block; }

 <a class="trade-alert-focus-anchor" href="#"> <div class="trade-alert"> <div class="scc-trade-alert-tips" onclick="showBox()"> <i class="tips-icon-mail" ></i> Subscribe to Trade Alert </div> </div> <div id="subscription-trade-alert-box"> <span class="close">&times;</span> Subscribe </div> </a>

Answer 2

在 javascript 中使用 onclick 事件而不是在 css 中使用 :focus 。

  <div class="trade-alert">
    <div class="scc-trade-alert-tips" onclick="document.getElementById('subscription-trade-popup').style = 'display: block;'">
      <i class="tips-icon-mail"></i>
      Subscribe to Trade Alert
    </div>
  </div>
                                        
  <div class="subscription-trade-alert-box" id="subscription-trade-popup">
    <span class="close">&times;</span>
    Subscribe
  </div>

Answer 3

通过在元素级别设置.style = 'none' ，它会否决 css 级别规则。 相反，您可以删除 css 规则并简单地添加另一个事件侦听器以在block和none之间切换样式。

另外，我建议使用document.querySelector()和document.querySelectorAll() ，因为它们是选择元素的现代标准。

 .trade-alert { width: 180px; height: 26px; display: inline-block; vertical-align: top; box-sizing: border-box; color: #333; } .subscription-trade-alert-box { width: 423px; height: 177px; border: 1px solid #DAE2ED; box-shadow: 2px 2px 5px rgba(83,100,122,.35); background-color: #fff; overflow: hidden; display: none; position: relative; left: 200px; } .close { cursor: pointer; position: absolute; top: 10px; right: 10px; display: block; transform: translate(0%, -50%); color: #333; font-size: 16px; font-family: 'Roboto', sans-serif; } .scc-trade-alert-tips { width: 180px; height: 16px; display: inline-block; position: relative; font-size: 14px; line-height: 16px; padding: 5px 5px 5px 25px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 25px; color: #1686CC; cursor: pointer; vertical-align: baseline; box-sizing: border-box; font-family: 'Roboto', sans-serif; } .tips-icon-mail { width: 16px; height: 16px; position: absolute; left: 5px; top: 2px; width: 16px; height: 16px; background: url(images/mail-ta.png) no-repeat 0 -25px; font-family: 'Roboto', sans-serif; } /* remove this .trade-alert-focus-anchor:focus .subscription-trade-alert-box { display: block; } */

 <a class="trade-alert-focus-anchor" href="#"> <div class="trade-alert"> <div class="scc-trade-alert-tips"> <i class="tips-icon-mail" ></i> Subscribe to Trade Alert </div> </div> <div class="subscription-trade-alert-box"> <span class="close">&times;</span> Subscribe </div> </a> <script> document.querySelectorAll('.close').forEach(function(close) { close.addEventListener('click', function(e) { e.stopPropagation(); //otherwise the click will bubble and reopen itself this.parentElement.style.display = 'none'; }); }); document.querySelector('.trade-alert-focus-anchor') .addEventListener('click', function() { document.querySelector('.subscription-trade-alert-box') .style.display = 'block'; }); </script>

Answer 4

JavaScript 将样式添加为内联 css。 所以如果你用 JS 添加一个样式，那么也用 JS 删除它。 这一行正在添加display: none; 作为内联样式，

this.parentElement.style.display = 'none';

我制作了一个代码笔，我使用 JS 打开和关闭弹出/模式，通过分配display: block来显示和display:none; 隐藏。

代码笔链接