动画 bootstrap 手风琴 panel-title 点击 jquery

Question

尝试在 bootstraps 手风琴组件上为 panel-title 的 margin-left 属性设置动画。我试过使用 .toggle() 但它只是做了一些奇怪的错误。我尝试了几种不同的方法，但 none 似乎有效。你可以在这里查看 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"}); 
});

Answer 1

将您的 CSS 部分更改为：

.panel-title {
   margin-left: 0px;
   transition: all 1s;
}

.open-panel {
   margin-left: 30px;
}

还有你的 Method one 作为：

//Method One
$('.panel-title').on('click', function() {
    var $this = $(this);
    $(".panel-title").not($this).removeClass('open-panel');
    $this.toggleClass('open-panel') 
});

这是你想要的吗？

更新我意识到你更新了你的笔，所以你需要注释掉一些其他的 JS 才能让我提到的代码正常工作，here 是更新的笔

动画 bootstrap 手风琴 panel-title 点击 jquery

animate bootstrap accordion panel-title on click jquery

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3

bootstrap-accordion