0

我有一系列新闻（准确地说是警报和公告），每个都单独包装在自己的<div>标签中，设置为在页面加载时隐藏除标题之外的所有内容。h2单击单个项目详细信息显示的任何标题 ( ) ( slideDown)，并且任何其他打开的项目折叠 ( slideUp)。因此，一次只能查看一个新闻项目。都好。

scrollTop当窗口宽度为平板电脑大小或更小（767px）时，我还将我的代码设置为最近单击的 div 的顶部。这仅部分有效。

我知道问题是什么，但不知道解决方案。

问题是，当我单击不同的新闻项目时，它的 scrollTop 坐标偏离了自动关闭的 div 的高度。我已经足够努力了，解决方案可能很简单，但我没有想出它。

该页面位于此处： http: //northqueensviewhomes.com/announcement-test

请记住使您的页面宽度小于 767 像素并刷新（当您足够小时，您会看到布局响应，然后单击一些顶部警报项，您最终会看到其中一个滚动得太高，甚至向下而不是向上到$thisdiv 的顶部。

这是我的 jQuery：

if ($('#bboards').length) {

  /* Page Load Cleanup */ 
  $('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
  $('.moreText').removeClass('hidden');

  function hideAll() {
    $('.announcement_item h2, .alert_item h2').removeClass('toggler').children('.moreText').fadeIn('fast').end().next('div').slideUp('fast');
  }

  $('.announcement_item h2,.alert_item h2').hover(function() {
    $(this).css({
      'cursor': 'pointer',
      'color': '#BC2E34',
    });
  }, function() {
    $(this).css({
      'cursor': 'default',
      'color': 'black',
    });
  }).click(function() {
    if ($('.toggler').length) {
      var previouslySelected = $('.toggler').parent('div').height();
      alert(previouslySelected);
    } else {
      var previouslySelected = 0;
      // alert(previouslySelected);
    }
    if ($(this).hasClass('toggler')) {
      hideAll();
      $('.toggler').removeClass('toggler');
      $(this).children('.moreText').fadeIn('fast'); //this is the "click to read more… text on the link"
      if ($(window).width() <= 767 {
         $('html, body').animate({
            scrollTop: ($(this).parent('div.well').offset().top - 13)
         }, 2222, 'easeInOutExpo');
      }
    } else {
      hideAll();
      $(this).addClass('toggler').next('div').slideDown('fast', 'easeInOutQuad');
      $(this).children('.moreText').hide(); //this is the "click to read more… text on the link"
      if ($(window).width() <= 767) {
         $('html, body').animate({
            scrollTop: ($(this).parent('div.well').offset().top - 13)
         }, 2222, 'easeInOutExpo');
      }
    }
  });
} // <--- End if $('#bboards').length

您可以在页面上实时看到 HTML。我添加了一堆虚拟条目只是为了创建页面高度。

我很确定我只需要延迟 scrollTop 直到slideUp完成，但是，再次，不知道如何。

4

1 回答 1

1

您可以尝试两种相对简单的解决方案。

  1. 如您所说，第一个是延迟 scrollTop 动画：

    setTimeout(function() {
    $('html, body').animate({
        scrollTop: ($(this).parent('div.well').offset().top - 13)
    }, 2222, 'easeInOutExpo');
}, 200);

  2. 或者，您可以在页面加载时隐藏其内容后记录每个公告和警报的初始位置。将您的部分标记/* Page Load Cleanup */为以下内容：

    /* Page Load Cleanup */ 
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
$('.announcement_item, .alert_item').each(function() {
    $(this).data("top", $(this).offset().top);
});

    这为每个公告提供了一个存储其初始位置的数据条目。然后，每当您需要为 scrollTop 设置动画时，请执行以下操作：

    $('html, body').animate({
    scrollTop: ($(this).parent('div.well').data().top - 13)
}, 2222, 'easeInOutExpo');

    请注意，这只有在公告和警报的内容不变的情况下才能正常工作。

我希望这有帮助！

于 2013-09-17T21:16:12.930 回答