有问题的网站:http://mtthwbsh.com
我正在尝试创建一个可折叠的导航,在切换时,箭头指向上方(隐藏时指向下方)。
我一直在阅读有关使用 jQuery 旋转图像的内容,并发现这是我最好的资源:使用 jQuery 旋转图像 OnClick?
我明白这里发生了什么,但我很难用我的标记将其可视化。我的折叠导航的 jQuery 如下:
<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
我想知道是否有人可以帮助解释我如何将此类功能转换为我的插件?
检查这个,也许可以帮助别人http://jsfiddle.net/gkmagvo3/515/
<a class="arrow" href="#">
<img class="arrow-img rotate-reset" src="img.png" />
</a>
一些CSS:
.rotate {
transform: rotate(-180deg);
/*transform: rotate(180deg);*/
transition: .3s;
}
.rotate-reset {
transform: rotate(0deg);
transition: .3s;
}
和 JavaScript:
$('.arrow').on("click", function (event) {
$('.arrow-img').toggleClass('rotate');
$('.arrow-img').toggleClass('rotate-reset');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)