为什么我的DIV更改为display ='none'（onclick JavaScript）？

我一直在这工作了一段时间，但我无法弄清楚为什么我的DIV不能改回显示：无。它从显示开始：我的CSS文件中没有。当你点击按钮时，它将改变显示的样式='block'。我有一个退出标签，我想在点击它时关闭DIV。我可以用visibility ='hidden'来做到这一点，但我不明白为什么display ='none'不应该起作用。为什么我的DIV更改为display ='none'（onclick JavaScript）？

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</a> 
     <div id="abo"> 
      <?php include 'about-more.php';?> 
      <div id="about-more"> 
      <h2>Learn More</h2><br> 
      <a href="http://youngmarists.org/">For more info on Young Marists</a><br> 
      <p>Contributers to this website</p> 

      <?php 
       foreach($profiles as $profile => $item): 
      ?> 

      <section class="profile"> 
       <h4 class="name"><?php echo $item['name'];?></h4> 
       <p class="role"><?php echo $item['role'];?></p> 
       <img class="profile-img" src="profiles/<?php echo $item['img'];?>"></img> 
      </section> 

      <?php endforeach;?> 

      <i class="fa fa-times-circle fa-2x" onclick="document.getElementById('abo').style.display = 'none';"; style="position:fixed;top:6%;right:18%;"></i> 
      </div>

来源

2017-10-15 Toby Meyrick

可见性：当您同时显示按钮和出口标签时，hidden实际上不起作用。 –

在代码的顶部，结束标记应该是。现在，你在那里：

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</a>

但它应该是：

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</button>

https://jsfiddle.net/p4pun8qz/

此外，还有一个额外的分号在这里：

onclick="document.getElementById('abo').style.display = 'none';";

尝试：

onclick="document.getElementById('abo').style.display = 'none';"

来源

2017-10-15 01:06:06

似乎在问题本身中存在拼写错误。 – bhansa

非常感谢，最愚蠢的事情，但我只是没有看到它。 –

因为你已经嵌套在<button>在您<i>标签和你display = 'block'的onClick是按钮本身内部从来没有触发onclick事件。

您需要稍微重新安排您的HTML或将第一个onClick移到其他位置以修复它。如果您将<i>元素移出<button>，您会明白我的意思。

如果您不打算让<button>标签包装所有东西，那么一定要将其关闭，因为它当前保持打开状态。

来源

2017-10-15 01:02:10

您正在关闭<button>并在第一行显示</a>。将</a>更改为</button>，它应该可以工作。

在onclick属性后，您的<i>中也有太多分号。

来源

2017-10-15 01:04:45 o01

为什么我的DIV更改为display ='none'（onclick JavaScript）？

回答

相关问题