javascript - 单击时无法执行旋转

问题描述

这是我的第一篇文章，所以如果我犯了任何错误，请告诉我。一周前开始为个人项目网站学习 html 和 css，并且在尝试将 javascript 功能应用于我的菜单时遇到了困难。要点：我正在制作一个带有点击幻灯片的联系页脚。它在单词“contacto”（联系人）旁边有一个向上箭头。确实解决了幻灯片，但无法使该箭头在单击时向下旋转。HTML：




$('.contacto_menu').click(function(){
    $('.icon-up-open').animate({
        transform: 'rotate(180deg)'
    });

});
$(document).ready(main);
 
var contador = 1;
 
function main () {
	$('.contacto_menu').click(function(){
		if (contador == 1) {
            $('.icon-up-open').animate({
				transform: 'rotate(180deg)'
			});
			$('footer').animate({
				bottom: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('footer').animate({
				bottom: '-50px'
            });
            $('.icon-up-open').animate({
				transform: 'rotate(0deg)'
			});
        }
        
    });
}
footer {
      position: fixed;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      width:70%;
      max-width: 800px;
      background: rgba(247,151,16,1);
      background: -moz-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247,151,16,1)), color-stop(100%, rgba(247,54,1,1)));
      background: -webkit-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -o-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -ms-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: linear-gradient(135deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1 );
      -webkit-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      border-radius: 200px 200px 20px 20px;
      -moz-border-radius: 200px 200px 20px 20px;
      -webkit-border-radius: 200px 200px 20px 20px;
      border: 0px solid #000000;
      z-index: 900;
   
}

.contacto_menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: large;
  top:-25px;

}

.icon-up-open{
  display: inline-block;
}

.footer ul li {
  display: inline-block;
  list-style: none;
  text-align: center;
  width: 32%;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
}

.footer ul li a{
  text-decoration: none;
  color: #FFF;

}
<!DOCTYPE html>  
<link rel="stylesheet" href="css/footer.css">
<script src="java/footer1.js"></script>

<footer>
    <a href="#" class="contacto_menu">Contacto<i class="icon-up-open"></i></a>
        <div class="footer">
            <ul>
                <li>Correo:<a href="#"></a></li>
                <li>Telefono:<a href="#"></a></li>  
                <li>Whatsapp:<a href="#"></a></li>
            </ul>
        </div>
    </footer>
</html>

标签： javascriptjqueryhtmlcss

javascript - 单击时无法执行旋转

问题描述

解决方案

推荐阅读