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

您可以使用以下内容：

EXAMPLE HERE

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

或者，如果您想使用不引人注目的JavaScript，如果您向链接添加id，这将有效。

EXAMPLE HERE

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

以上示例隐藏与display:none的链接。如果您希望删除元素：

EXAMPLE HERE

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

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

EXAMPLE HERE

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

CSS

.hidden {
    display:none;
}

只需考虑the support这种方法。

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

单击链接时隐藏div

3 个答案: