Question

我已经在这工作了一段时间，但我无法弄清楚为什么我的DIV无法改回显示：无。它从我的CSS文件中的display：none开始。单击该按钮时，它会将样式更改为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>

Answer 1

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

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

如果您不打算将<button>标记包装好，那么请务必将其关闭，因为它当前处于打开状态。

Answer 2

您正在第一行中以router.post('/posttest/:id', async (ctx, next) => { console.log(ctx.params.id); // 200 });关闭<button>。将</a>更改为</a>，它应该有效。

在onclick属性之后，</button>中的分号也过多。

Answer 3

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

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

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

3 个答案: