时间戳

首页 > 解决方案 > 如何在单击按钮时转换 div

javascript - 如何在单击按钮时转换 div

问题描述

如何转换/动画我的 div？我只是想做一个简单的动画，比如下拉菜单，但不知道怎么做:(谢谢你的帮助！

这是我正在使用的代码：

function test1(button) {
   var x = $('#showhide');
   $(button).find('i').remove();
   if ($(button).text().trim() == 'Test') {
     $(button).html($('<i/>',{class:'fas fa-angle-down'})).append(' Test (Hide)');
     x.fadeIn();
    }
    else {
      $(button).html($('<i/>',{class:'fas fa-angle-right'})).append(' Test');
      x.fadeOut();
    }
}
.button {
  background-color: #b5b5b5; 
  margin-bottom: 10px; 
  cursor:pointer; 
  border: none; 
  color: #242424; 
  padding: 0px; 
  width: 160px; 
  height: 50px; 
  line-height: 50px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px;
  transition-duration: 0.4s;
}

.button1 {
  background-color: #b5b5b5; 
  color: #242424;
}

.button1:hover {
  background-color: #9c9c9c;
  color: #242424;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0254f919d5.js" crossorigin="anonymous"></script>

<button id="btntest1" onclick="test1(this); if(document.getElementById('test1') .style.display=='none') {document.getElementById('test1') .style.display=''}else{document.getElementById('test1') .style.display='none'}" title="Clique pour en voir +" class="button button1"> 
        <i class="fas fa-angle-right"></i> Test
    </button><br>

<div id="test1" style="display:none; background-color: #b5b5b5; padding: 15px; color: #242424">
<h3>Lorem :</h3>
<ul><li>Ipsum</li><li>dolor</li><li>sit<br></li></ul>

<h3>Nulla :</h3>
<ul><li>id</li><li>mi</li><li>sagittis<br></li></ul>
</div>

我知道这有点乱，但我刚刚开始学习 HTML、CSS 和 Javascript，所以请不要无礼 :( （另外我英语说得不太好，抱歉）

标签： javascripthtmlcss

解决方案

由于您已经在使用 jQuery，您可以使用slideToggle函数。

function test1(button) {
  $("#test1").slideToggle("slow");
  var x = $("#showhide");

  $(button).find("i").remove();
  if ($(button).text().trim() == "Test") {
    $(button)
      .html($("<i/>", {
        class: "fas fa-angle-down"
      }))
      .append(" Test (Hide)");
    x.fadeIn();
  } else {
    $(button)
      .html($("<i/>", {
        class: "fas fa-angle-right"
      }))
      .append(" Test");
    x.fadeOut();
  }
}
.button {
  background-color: #b5b5b5;
  margin-bottom: 10px;
  cursor: pointer;
  border: none;
  color: #242424;
  padding: 0px;
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}

.button1 {
  background-color: #b5b5b5;
  color: #242424;
}

.button1:hover {
  background-color: #9c9c9c;
  color: #242424;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/0254f919d5.js" crossorigin="anonymous"></script>

<button id="btntest1" onclick="test1(this);" title="Clique pour en voir +" class="button button1">
      <i class="fas fa-angle-right"></i> Test</button
    ><br />

    <div
      id="test1"
      style="
        display: none;
        background-color: #b5b5b5;
        padding: 15px;
        color: #242424;
      "
    >
      <h3>Lorem :</h3>
      <ul>
        <li>Ipsum</li>
        <li>dolor</li>
        <li>sit<br /></li>
      </ul>

      <h3>Nulla :</h3>
      <ul>
        <li>id</li>
        <li>mi</li>
        <li>sagittis<br /></li>
      </ul>
    </div>

推荐阅读