如何旋转＆＃34;三角形＆＃34;到了三角形＆＃34;使用css和jquery

Question

我有以下三角形

由以下css创建：

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;

}

HTML：

<div class=triangle></div>

当我点击三角形时，我希望它旋转并变成一个三角形朝上。你能指导我如何实现这个目标吗？

这个代码尝试了三角形

.triangle-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #555;
    margin-left: -10px;
}

我不确定当三角形向下点击三角形时如何让它旋转，然后当点击三角形时它必须旋转回三角形

Answer 1

您可以使用toggleClass()和transform旋转箭头

＆＃13;

＆＃13;

$(".triangle").click(function() {
  $(this).toggleClass("triangle-up");

})

＆＃13;

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-top: 80px solid red;
  transition: all .5s;
}

.triangle-up {
 transform:rotateX(180deg);
 margin-top:-50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

简单的解决方案是在两个类之间切换（如果不需要动画）：

$('.triangle,.triangle-up').click(function(){
   $(this).toggleClass("triangle triangle-up");
});

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;

}
.triangle-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #555;
    margin-left: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=triangle></div>

Answer 3

您只需要使用一些JavaScript切换此类：

＆＃13;

＆＃13;

var triangle = document.querySelector('.triangle');

triangle.addEventListener('click', function(){
triangle.classList.toggle('triangle-up')
});

＆＃13;

.triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #cecece;
margin-left: -10px;
}

.triangle-up {
transform: rotate(180deg);
border-top: 10px solid #555;
}

＆＃13;

<div class="triangle"></div>

＆＃13;

＆＃13;

＆＃13;

单击箭头时，此选项在向上和向下之间切换。

如果您有多个箭头，那么只需将JS更改为：

var triangle = document.querySelectorAll('.triangle');

Array.prototype.forEach.call(triangle, function(el, i){
  el.addEventListener('click', function(){
    el.classList.toggle('triangle-up');
  });
});

Answer 4

考虑在指定的类之间切换，如下面的嵌入式代码片段所示。

jQuery .toggleClass()方法：

＆＃13;

＆＃13;

jQuery('.triangle').on('click', function(){
  jQuery(this).toggleClass('triangle triangle-up');
});

＆＃13;

body {
    padding: 10px;
    background: black;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;

}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #555;
    margin-left: -10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=triangle></div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以调整类.triangle-up的指定样式以旋转元素（声明了transform规则），而不是重新定义边框，然后只切换此类。通过添加声明的transition规则，这将允许有问题的元素在类之间切换时进行动画处理。

jQuery .toggleClass()方法（过渡动画演示）：

＆＃13;

＆＃13;

jQuery('.triangle').on('click', function(){
  jQuery(this).toggleClass('triangle-up');
});

＆＃13;

body {
    padding: 10px;
    background: black;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;
    transition: .5s; /* required for animation effect */
}

.triangle-up {
    transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=triangle></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

实现这一目标的一种方法是在jQuery中使用.hasClass（）和.addClass（）方法

＆＃13;

＆＃13;

jQuery(document).ready(function(){
		jQuery('.triangle').click(function(){
			if(jQuery(this).hasClass('triangle-up')){
				jQuery(this).removeClass('triangle-up');
			}else{
				jQuery(this).addClass('triangle-up');
			}
     		
		});
	});

＆＃13;

    .triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;
    }

    .triangle-up{
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     transform: rotate(180deg);
    }
    

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class=triangle></div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

在这里您可以使用css转换来使用以下代码片段，通过切换css类：

＆＃13;

＆＃13;

$(".triangle").click(function() {
  $(this).toggleClass("triangle-up");

})

＆＃13;

body {
  margin:20px;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;
    transition: .5s ease;

}

.triangle-up {
 transform:rotate(180deg);
 transform-origin: 50% 40%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="triangle"></div>

＆＃13;

＆＃13;

＆＃13;