單擊鏈接時隱藏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);