我还没有创建下拉部分,但我希望能够有箭头,我在单击时创建了指向下方的箭头。这已经是我的代码了。当我选择 div 时,我尝试的所有操作都没有收到任何操作。
$(document).ready(function() {
$('.circle').click(function() {
$('#rotate').toggleClass('rotated');
});
});
.header{
margin: -8px;
height:75px;
background-color: rgba(222,70,82,.7);
}
.circle{
width:40px;
height:40px;
border-radius:60px;
border: solid 3px white;
position: absolute;
left: 200px;
top:18px;
}
.circle2{
width:30px;
height:30px;
top: 3px;
left: 3px;
border-radius:60px;
border: solid 2px white;
position: absolute;
}
.arrow{
content:'';
display:block;
position:relative;
top:6px;
left:4px;
height:15px;
width:15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top:4px solid white;
border-right:4px solid white;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.rotated{
transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
<header class = "header">
<div class ="circle" >
<div class = "circle2"
</div>
<div class = "arrow"id="rotate"></div>
</div></header>
`
最佳答案
将变换更改为 135 度后工作。
修改后的 CSS
.rotated{
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
margin-left: 1px;
}
关于Javascript,如何旋转我的箭头 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26346526/