Jquery 如何使单击的元素粘贴到标题的顶部？

我的要求是，我需要使单击的元素粘贴到标题的顶部

例如，如果我单击标题3，它必须隐藏标题1和标题2，并使标题3粘贴到顶部，当向后滚动时，标题2和标题1必须可见

同样，当点击点击标题2时，它必须隐藏标题1并使标题2粘在顶部，当向后滚动时，标题1必须可见

你能告诉他们怎么做吗

 $(document).ready(function() {
   $('.my-collaspible').on('collapsibleexpand', function() {
      //  $('.my-collaspible').not(this).collapsible("collapse")
           $('.my-collaspible').animate({ scrollTop: 0 }, 'slow');

   });
 });

---

这是原稿，看起来很实用：

虽然没有对滚动进行优化，但这将是一个简单的解决方案。但事实证明，当使用这个时，会出现一些奇怪的动态：

item.on('collapsibleexpand', function() { ...

创建大量调用，溢出了Chrome的最大堆栈大小，正如可以在注释中读取的那样。因此，这里有一个解决方法，可以将它们减少为每次一次呼叫：

---

有什么办法可以解决这个问题吗？嗯，这很好，向下滚动时可以显示项目吗？不客气，向下滚动到底是什么意思？我想你的意思是向下滚动…好的，添加了一些行，使所有项目都折叠和可见。如果还有什么可以优化的，我会再看一眼……但为什么我在控制台中遇到异常，就像我运行这段代码时一样。未捕获范围错误：最大调用堆栈大小超过任何特定浏览器？Firefox上的控制台是干净的。编辑-我在Chrome上看到了这种情况。我看看能不能弄清楚它是怎么粘在一起的，然后修好它。正在调整以优化它。可能是滚动，通常会激发很多。我会更新答案。

item.on('collapsibleexpand', function() { ...

$(document).ready(function() {

  var item = $('.my-collaspible');
  var collapsed = true;

  $('.ui-btn').click(function() {

    item.one('collapsibleexpand', function() {

      collapsed = false;
      checkCollapsed();
      item.not($(this)).hide();
      $(this).collapsible('expand');

    })
    .one('collapsiblecollapse', function() {

      item.show();
    });
  });

  $(window).scroll(function() {

    if (!collapsed) {
      checkCollapsed();
      item.show();
      collapsed = true;
    }
  });

  function checkCollapsed() {
    $.each(item, function() {
     if (!$(this).hasClass('ui-collapsible-collapsed')) $(this).collapsible('collapse');
    });
  }
});