Javascript 手风琴

我有一个简单的手风琴工作，除了一件事。我希望能够再次单击相同的手风琴项目，并能够将高度设置为“0”

当前，当我单击其他手风琴项目时，打开的手风琴项目关闭，这正是我想要做的-但我也希望能够重新单击打开的手风琴项目，并在单击时关闭该项目。请参见下面的工作示例：

---

我可以添加什么代码来添加这个额外的功能？

我已经修改了您的代码，添加了另一个if，检查单击的元素是否已经有了“on”类。它现在应该按照您的预期工作（当用户单击已打开的标题时隐藏）

你可以做的比你现在做的简单得多：

// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});

// Set the timeline to its end state
tl.progress(1);

// Toggle the timeline's direction
$('.accordianItem').click(function() {
    tl.reversed() ? tl.play() : tl.reverse();
});

我强烈建议退房。它们非常有用，您可以从GSAP和网络动画专家那里快速获得帮助：）

// set heights to 0
gsap.set('.content', {height:0});

// click function
$('.accordianItem').click(function() {
    if($(this).hasClass("on")){
       gsap.to($('.content'), {duration:.25, height:0});
       $('.accordianItem').removeClass('on');
    }
    else{
      if ($('.accordianItem').hasClass('on')) {
         gsap.to($('.content'), {duration:.25, height:0});
         $('.accordianItem').removeClass('on');
      }
      gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
      $(this).addClass('on');
    }

});

// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});

// Set the timeline to its end state
tl.progress(1);

// Toggle the timeline's direction
$('.accordianItem').click(function() {
    tl.reversed() ? tl.play() : tl.reverse();
});