Question

我在发布信息时遇到了问题。

基本上，它是横幅和标题的列表，内容div隐藏在CSS中。单击标题时，相关内容div将向下滑动。同时，任何其他打开的div都会向上滑动，这样您一次只能查看一篇文章。然后页面滚动到相关横幅div的顶部。

这是一个jsFiddle：http://jsfiddle.net/JGuilford/VzVCD/

HTML：

<!-- Content area -->
<div id="content" class="site-content" role="main">
<!-- First Post -->
<!-- Header -->
<article id="post1" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post1
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-1">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>
<!-- Second Post -->
<!-- Header -->
<article id="post2" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post2
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-2">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>
<!-- Third Post -->
<!-- Header -->
<article id="post3" class="standard post">
    <header class="entry-header">
        <div class="entry-thumbnail">
            <div class="entry-thumbnail-text">
                 <h1 class="entry-title-thumbnail-active">
            Post3
         </h1>

            </div>
            <!-- .entry-thumbnail-text -->
            <img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
        </div>
        <!-- .entry-thumbnail -->
    </header>
    <!-- .entry-header -->
    <!-- Article Content -->
    <div class="entry-content-thumbnail" id="content-3">
        <p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
        <p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
        <p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
        <p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
    </div>
</article>

JQuery：

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

问题在于，如果文章已在用户单击打开的文章上方打开，则当文章关闭时，所单击的标题会向上滚动并退出视图。基本上，我无法弄清楚如何让scrollTop使用点击的.entry-title-thumbnail-active的最终位置而不是它的初始位置。要查看我的意思，请打开jsFiddle并单击Post 2，然后单击Post 3. Post 3的文章将展开，Post 2的文章将会崩溃，但窗口将尝试滚动到Post 3的初始位置的标题，而不是在Post 2崩溃后的位置。

有谁知道如何解决这个问题？

Answer 1

complete上的.slideToggle()方法是一个函数。请参阅slideToggle docs

所以它应该是：

$(".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', function () {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 'slow')
    });
    return false;
});

您也无需设置'swing'，因为它已经是默认应用easing。

选中jsfiddle。

如何在slideUp后执行scrollTop

1 个答案: