[英]animate bootstrap accordion panel-title on click jquery
trying to animate the margin-left property of the panel-title on bootstraps accordion component. 尝试为bootstraps手风琴组件上的panel-title的margin-left属性设置动画。 I've tried using .toggle() but it just does some weird bug.
我尝试使用.toggle(),但是它确实做了一些奇怪的错误。 I've tried a few different methods but none seem to work.
我尝试了几种不同的方法,但似乎都没有用。 you can check it out here codepen
你可以在这里检查出来Codepen
//Method Onee By Adding A Class
$('.panel-title').click(function() {
$(this).addClass('open-panel')
})
$('.panel-title').click(function() {
$(this).removeClass('open-panel')
})
//Method Two By Click but just animates open and closes right after another
$('.panel-title').click(function(){
$(this).animate({"margin-left": '+=20'});
}),
$('.panel-title').click(function(){
$(this).animate({"margin-left": '-=20'});
});
//Method Three the panels shrink among themselves cause of toggle()
$(".panel-title").toggle(
function () {
$(this).animate({"margin-left": "+50px"});
},
function () {
$(this).animate({"margin-left": "0px"});
});
Change your CSS
part as: 将您的
CSS
部分更改为:
.panel-title {
margin-left: 0px;
transition: all 1s;
}
.open-panel {
margin-left: 30px;
}
Also your Method one
as: 还有你的
Method one
:
//Method One
$('.panel-title').on('click', function() {
var $this = $(this);
$(".panel-title").not($this).removeClass('open-panel');
$this.toggleClass('open-panel')
});
Is that what you want? 那是你要的吗?
Update I realized you updated your pen, so you need to comment out some other JS to my mentioned code works correctly, here is updated pen 更新我意识到您已经更新了笔,所以您需要注释掉其他一些JS才能使我提到的代码正常工作, 这里是更新的笔
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.