我正在使用JavaScript切换通知,如下所示.如何在display: block和之间添加转换display: none;
我不想添加像jQuery这样的外部库,因为我只会toggle单独使用该效果.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.display == 'none'){
hint.style.display = 'block';
}
else{
hint.style.display = 'none';
}
});Run Code Online (Sandbox Code Playgroud)
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}Run Code Online (Sandbox Code Playgroud)
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>Run Code Online (Sandbox Code Playgroud)
我知道我可以使用jQuery来实现这一点,如下所示.
$(document).ready(function(){
$('button').click(function(){
$('#hint').toggle('slow');
}); …Run Code Online (Sandbox Code Playgroud)