Question

我的要求是，我需要将点击的元素贴在标题的顶部。

例如，如果我点击Header 3，它必须隐藏Header 1和Header 2并使Header 3坚持到顶部，当向后滚动时，Header 2和Header 1必须是visibale。

类似地，当点击Header 2时，它必须隐藏Header 1并使Header 2坚持到顶部，当向后滚动时，Header 1必须是visibale。

请你知道如何继续吗？

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

   });
 });

http://jsfiddle.net/jWaEv/70/

Answer 1

所以这是原始草案，看起来很实用：

http://jsfiddle.net/xr6fn9cw/

$(document).ready(function() {

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

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

    item.not($(this)).collapsible('collapse').hide();
    $(this).collapsible('expand');

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

    item.show();
  });

  $(window).scroll(function() {

    item.collapsible('collapse').show();
  });
});

使用该卷轴不是非常优化，但这将是一个简单的修复。但事实证明，使用它时会出现一些奇怪的动态：

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

创建大量的调用，溢出Chrome的最大堆栈大小，可以在评论中阅读。所以这里有一个解决方法，每次都将它们减少到一个调用：

http://jsfiddle.net/3skm69qf/

$(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');
    });
  }
});

如何使点击的元素粘在标题的顶部？

1 个答案: