小编Abk*_*Abk的帖子

JavaScript - 在display:none和display:block之间添加转换

我正在使用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)

javascript transition display

15
推荐指数
3
解决办法
3万
查看次数

标签 统计

display ×1

javascript ×1

transition ×1