显示和隐藏类（onClick）

问题描述：

上传我在一个按钮上使用Bootstrap 3中的图形，它使用CSS3关键帧旋转，我希望（。隐藏）这个类，直到点击按钮，然后它会出现/显示，并旋转...有生命，因为它呢？显示和隐藏类（onClick）

这里是我的小提琴：

http://jsfiddle.net/DannyJardine/8djrcwnb/4/

<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> 
Upload</button>

答

看起来你正在使用AngularJS？在这种情况下阅读这篇文章

Angular css toggle

遗憾是，忽略了angularJs，是有没有去离开这个是......在这里更新的提琴...... HTTP：//jsfiddle.net/DannyJardine/8djrcwnb/ 2 /，它不是我的代码，所以abit miffed .. – 1966 2015-03-02 15:45:33

尝试使用jQuery http://api.jquery.com/toggleclass/ – Thorarins 2015-03-02 16:00:36

感谢您的评论，我已经尝试jQuery切换，无济于事......它只是闪烁..但不隐藏 – 1966 2015-03-02 16:03:22

答

你可以使用CSS的这种功能，并使用jQuery的toggleClass属性：

$('button').click(function() { 
 
    $('.togglable').toggleClass("active"); 
 
});

button { 
 
    height: 50px; /*just some styling for the button*/ 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    box-shadow: inset 2px 2px 10px white, inset -2px -2px 10px black; 
 
    outline: none; 
 
} 
 
.togglable { 
 
    font-size: 0; 
 
    height: 0; 
 
    width: 0; 
 
    transition: all 1s; /*speed of animation*/ 
 
    transform-origin:center center; 
 
    text-align:center; 
 
    margin:0 auto; 
 
} 
 
.active { 
 
    font-size: 50px; 
 
    height: 50px; 
 
    width: 400px; 
 
    transform: rotate(720deg); /*multiple of 360 to ensure animation finishes 'straight'*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button></button> 
 
<div class="togglable active">Press the red button to toggle me!!!</div>

答

想通了使用显示为N隐藏JQuery ..测试和错误

$(document).ready(function() { 
$('.glyphicon-refresh-animate').hide(); 
}); 

$("button").click(function(){ 
$(".glyphicon-refresh-animate").show(); 
});

感谢你为你的帮助......

显示和隐藏类（onClick）

相关推荐