javascript - 通过单击链接打开和关闭 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>

如何让这个无限开合。

标签： javascripthtmljquerycss

Answer 1

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