1

您好:我有一页 div 中的文章,开始时隐藏在可点击的横幅后面。每次单击横幅时,它都会使用 slideToggle 扩展相关的文章 div,并关闭使用 slideUp 打开的任何其他文章 div。我有以下代码,如果视图从单击的横幅 div 的最终位置上方开始,则将窗口向下滚动到该 div;但是,如果文章在该 div 上方关闭,它将向上移出视图,然后窗口不会向上滚动到它。我怎样才能解决这个问题?

$(document).ready(function () {
    $(".entry-title-thumbnail-active").click(function () {
        $(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');
        $(this).closest('article').find('.entry-content-thumbnail').slideToggle(
            'slow', 'swing', $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 'slow'));
        return false;
    });
});

基本上,逻辑将 DOM 树向上移动到包含所有横幅和文章 div 的父 .site-content div,然后找到所有子 .entry-content-thumbnail div 并将它们向上滑动 - 不包括单击的 .entry 的兄弟-title-thumbnail-active - 确保没有其他文章显示。然后它再次将树向上移动一级到包含所有子元素的文章 div,并在该 div 中找到 .entry-content-thumbnail 并将其扩展。

问题是,如果一个 div 在执行一个 slideToggle 打开的 div 上方执行一个 slideUp,那么文章的顶部就会拉出视图,这会导致阅读体验不佳。我只是想让窗口滚动回单击的.entry-title-thumbnail-active。

我把它放在一个 jsFiddle 里:http: //jsfiddle.net/JGuilford/VzVCD/

任何帮助将非常感激!

4

0 回答 0