我想制作一个按钮，在点击后自行旋转

我想制作一个按钮，点击后自行旋转。该按钮具有动态名称（id，class）。点击时，它会显示或隐藏WordPress的一部分。当邮件被打开时，我希望它向上指向，当向下包裹时。我想制作一个按钮，在点击后自行旋转

<div> 
    <div class="button_wrap" id="opis<?php echo get_the_ID()?>"> <button class="button" type="button" id="button<?php echo get_the_ID()?>"></button> </div> 
</div> 
<script> 
    $("#button<?php echo get_the_ID()?>").click(function() { 
     $("#opis<?php echo get_the_ID()?>").slideToggle(1000); 
    }); 
</script>

CSS

.button_wrap { 
    width: 100%; 
    height: 80px; 
    text-align: center; 
} 
.button { 
    background: url(/arrow.svg) no-repeat; 
    margin-top: 20px; 
    cursor: pointer; 
    height: 50px; 
    width: 75px; 
    border: none; 
    transition: .3s ease; 
    padding-bottom: 5px; 
} 
.button:hover { 
    background: url(/arrow.svg) no-repeat; 
    color: red; 
    cursor: pointer; 
    height: 50px; 
    width: 75px; 
    border: none; 
    transition: .3s ease; 
    margin-top: 13px; 
} 
.opisy { 
    display: none; 
}

我相信，我有一个CSS类添加到该按钮但后来我有第二次点击之后将其删除。我有点失落，也许有一个更简单的方法呢？

来源

2017-02-19 Tad

最简单的方法imo。

$('.btn').click(function(){ 
 
    $(this).toggleClass('rotate'); 
 
});

.btn { 
 
    transition: all 1s ease-in; 
 
} 
 

 
.rotate { 
 
    transform: rotate(360deg); 
 
    transition: all 1s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='btn'>content</button>

来源

2017-02-19 13:04:46

它的工作，但我有一个奇怪的错误每隔按钮只旋转位置。 – Tad

@Tad描述该错误。 –

有一个循环显示wordpress帖子，并在该循环中我有一个使用帖子id（id =“button <？php echo get_the_ID（）？>”）的目标按钮和帖子。该按钮显示帖子的隐藏内容。也许有进一步隔离剧本的方法吗？ – Tad

我想制作一个按钮，在点击后自行旋转

回答

相关问题