javascript - 如何通过切换时的文本更改对内容隐藏和显示添加速度效果？

Question

我试图让一些内容在切换按钮上隐藏和显示。我的问题是我无法添加隐藏和显示的速度效果以及单击时按钮的文本更改。请帮助我!谢谢 !

<script> 
   function toggleDescriptionHeight() {
   document.querySelector(".backwhite").classList.toggle('expanded');
}
</script>


<style>
  .backwhite{
   background-color: aqua;
   padding:15px;
   height:50px;
   overflow:hidden;
}
  .backwhite.expanded {
   height: auto;
}
</style>


<div class="container">
 <div class="backwhite">
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 </div>
 <button type="button" class="btn btn-default btn-block" onclick="toggleDescriptionHeight();">Toggle</button>
</div>

Answer 1

高度:自动；不会给 div 带来切换效果

如果您使用的是 jQuery，这非常简单:

$(".backwhite").toggle( "slow" );

您也可以使用纯 javascript 执行此操作:

function toggleDescriptionHeight() {
  var el = document.querySelector(".backwhite");
  var height = el.scrollHeight;
  el.style.height = el.offsetHeight == "50" ? height+"px" : "50px";
}

.backwhite{
   background-color: aqua;
   padding:15px;
   height:50px;
   overflow:hidden;
   transition:all .5s; //added code
   box-sizing:border-box; //added code
}

<div class="container">
 <div class="backwhite">
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  <p>1. Create Ui For Email Campaign.</p>
  <p>2. Create Functionality of Email Campaign</p>
  <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
 </div>
 <button type="button" class="btn btn-default btn-block" onclick="toggleDescriptionHeight()">Toggle</button>
</div>