animate bootstrap手風琴面板標題單擊jquery

Question

嘗試為bootstraps手風琴組件上的panel-title的margin-left屬性設置動畫。 我嘗試使用.toggle（），但是它確實做了一些奇怪的錯誤。 我嘗試了幾種不同的方法，但似乎都沒有用。 你可以在這里檢查出來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才能使我提到的代碼正常工作， 這里是更新的筆