animate bootstrap accordion panel-title on click jquery

Question

試圖在bootstraps accordion組件上設置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註釋掉我提到的代碼工作正常，here更新筆