为什么我的 DIV 不会更改为 display='none' (onclick JavaScript)？答案

【问题标题】：Why won't my DIV change to display='none' (onclick JavaScript)?为什么我的 DIV 不会更改为 display='none' (onclick JavaScript)？
【发布时间】：2018-03-26 19:39:16
【问题描述】：

我已经为此工作了一段时间，但我不明白为什么我的 DIV 不能改回显示：无。它从 display: none 在我的 CSS 文件中开始。当您单击按钮时，它会将样式更改为 display = 'block'。我有一个退出标签，我想在单击它时关闭 DIV。我可以使用 visibility = 'hidden' 来做到这一点，但我不明白为什么 display = 'none' 不应该工作。

 <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>

【问题讨论】：

可见性：当您同时使按钮和退出标签可见而不是显示时，隐藏实际上不起作用。

标签： javascript html css

【解决方案1】：

因为您已将<i> 标记嵌套在<button> 中，并且您的display = 'block' onClick 位于按钮本身上，所以永远不会触发内部的onClick 事件。

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

如果您不打算让 <button> 标记包装所有内容，请确保将其关闭，因为它当前处于打开状态。

【讨论】：

【解决方案2】：

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

<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';"

【讨论】：

问题本身好像有错别字。
非常感谢，最愚蠢的事情，但我只是没看到。

【解决方案3】：

您将在第一行使用</a> 关闭您的<button>。将</a> 更改为</button>，它应该可以工作。

您的<i> onclick 属性后面的分号也太多了。

【讨论】：