Question

我在页面上重复多次以下html结构：

<div class="item">
    <div class="header">
        ...
        <a href="#" class="closeExpanded">Close All Expanded</a>
    </div>
    <div class="expanded">
        ...
    </div>
</div>

当点击链接时，有些jQuery会关闭所有扩展类的div：

$('.closeExpanded').click(function(e){
    e.preventDefault();
    $('.expanded').slideUp('slow');
});

然而我想确保您刚刚点击的链接仍然在视图中并尽可能少地移动。当前点击页面中间的链接会导致链接向上移出视口，因为它上方的div已关闭。

是否有一种优雅的方式可以保留在视口中点击的链接？

更新到目前为止，我已经尝试了建议的答案，但到目前为止还没有完全有效（例如，点击每个链接中的第30个链接导致第30个链接最终在视口之外）

mrtsherman的解决方案：http://jsfiddle.net/Qan5p/38/
Mohsen的解决方案：http://jsfiddle.net/Qan5p/39/
roXon的解决方案：http://jsfiddle.net/Qan5p/40/

Answer 1

您需要修改页面的scrollTop属性以保持适当的位置。幸运的是，随着元素缩小，它们将触发您可以挂钩的滚动事件。

//untested, but should look something like this
var linkPosition = null;

$('.closeExpanded').click(function(e){
  e.preventDefault();
  linkPosition = $(this).offset().top - $(document).scrollTop();
  //in callback to slideUp clear linkPosition so that we know to stop tracking scroll events
  $('.expanded').slideUp('slow', function() {
      linkPosition = null;
  });
});

$(document).scroll( function(){
  //check to see if we should be keeping link on screen
  if (linkPosition != null) {
     //keep the link in position
     //I'm not so sure about this bit of the code, but I think you get the idea. All you have to do 
     //is properly calculate the new offset to keep the link looking like it is in the same position
     var newPos = $(document).scrollTop() + linkPosition;
     $(document).scrollTop(newPos);
  }
});

Answer 2

$('.closeExpanded').click(function(e){
    e.preventDefault();
    $('.expanded').css({
        'position' : 'absolute', // make it position absolute to prevent moving
        'left' : $(this).offset().left,
        'top' : $(this).offset().top 
    }).slideUp('slow', function(){
      $('.expanded').css('position', 'static');
});
});

小提琴：http://jsfiddle.net/mohsen/Qan5p/10/

Answer 3

WORKING DEMO

最简单的方法：

将内容包装到动态生成的div中。首先动画内容，比动画包装元素

$('.expanded').wrapInner('<div class="wrapper" />');
$('.expanded').each(function() {
    $(this).height($(this).children('.wrapper').height());
});

$('.closeExpanded').click(function(e) {
    e.preventDefault();
    $('.wrapper').animate({height: '0px'}, 800, function() {
        $('.expanded').slideUp(800);
    });
});

在调用jQuery的slideUp函数时，在视口中保持单击的链接

3 个答案:

WORKING DEMO