侧元素动画切换

问题描述

我该怎么做，如果有人点击右边的矩形，那么这个矩形会更长，例如400 px，如果你再次点击它，矩形会再次变小

  <div class="nebenmenu"><i class="fa fa-css3"></i>
  </div>

jQuery 代码

$(document).ready(function(){
   $(".nebenmenu").click(function(){
      $(this).animate({width:"200px"},500)
   },function(){
      $(this).animate({width:"55px"},500)

   })
})

解决方法

如果它在数据属性中切换，您可以存储信息。喜欢：

    $(document).ready(function(){
       $(".nebenmenu").click(function(){ 
          var toggle = $(this).attr('data-toggle');
          if(!toggle){ console.log("toggle")
             $(this).animate({width:"200px"},500);
             $(this).attr("data-toggle",true)
          }else { console.log("nottoggle")
             $(this).animate({width:"55px"},500);
             $(this).removeAttr("data-toggle")
          }
       })
    })

.nebenmenu {
width:55px;
height:55px;
border:1px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nebenmenu" ><i class="fa fa-css3"></i>
    </div>