单击链接时隐藏div

Question

我正在尝试创建一些文本的div。 然后，下面是一个链接，当单击div时应隐藏。 这只能是Java脚本，即没有Jquery

请参阅下面的尝试。是否可以在元素内部以某种方式进行操作？ 我必须在JD脚本中创建一个函数吗？

<div id="text">
    Lorem Ipsum blablal b blablaba balbla bla.
</div>
<a href="#" onclick="document.getElementById('text').hidden">Click me to hide the div</a>

Answer 1

您可以使用以下内容：

这里的例子

<a href="#" onclick="document.getElementById('text').style.display = 'none'">...</a>

---

另外，如果您想使用不干扰JavaScript的代码，则可以在链接中添加id来使用。

这里的例子

document.getElementById('link').addEventListener('click',function(){
    document.getElementById('text').style.display = 'none';
});

---

上面的示例使用display:none 隐藏了链接。 如果您希望删除该元素：

这里的例子

document.getElementById('link').addEventListener('click',function(){
    document.getElementById('text').remove();
});

---

如果要切换可见性并隐藏/显示元素，可以使用.classList.toggle() 。

这里的例子

document.getElementById('link').addEventListener('click',function(e){
    document.getElementById('text').classList.toggle('hidden');
});

的CSS

.hidden {
    display:none;
}

只需考虑此方法的支持即可 。

Answer 2

使用此代码，您可以隐藏/显示div主题，而不必添加任何<script>标记或JavaScript库。

<div id="text" style="display: block">
    Lorem Ipsum blablal b blablaba balbla bla.
</div>
    <a href="#" onclick="document.getElementById('text').style.display === 'block' ? document.getElementById('text').style.display = 'none' : document.getElementById('text').style.display = 'block'">Click me to hide the div</a>

Answer 3

josh是正确的，只需向addEventListener添加第三个参数为false即可在冒泡阶段捕获事件

document.getElementById('link').addEventListener('click',function(){
    document.getElementById('text').style.display = 'none';
}, false);