Question

我希望隐藏<p class="hidetext">，点击<div class="post-more">See more</div>时会显示<p class="hidetext">

<div class="center">
    <div id="content">
        <div id="posts">
            <div class="post">
                <div class="post-img"><a href="#"><img src="img/post-img/1.png" width="100%" height="100%"  alt=""/></a></div>
                <div class="post-title">
                    <h1>BLA BLA BLA</h1>
                    <div class="line"></div>
                </div>       

                <div class="post-text">
                    <p>
                        Text here Text here Text here Text here Text here Text here Text here Text here 
                        Text here Text here Text here Text here Text here Text here Text here Text here 
                    </p>
                    <p>
                        Text here Text here Text here Text here Text here Text here Text here Text here 
                        Text here Text here Text here Text here Text here Text here Text here Text here ...
                    </p>
                    <p class="hidetext">
                        Text hide  Text hide  Text hide  Text hide  Text hide  
                    </p>      
                </div>

                <div class="post-more">See more</div>
            </div><!-- one post  -->
        </div>
    </div>
</div>

Answer 1

$('div.post-more').click(function () {
    $(this).closest('div.post').find('p.hidetext').toggle();
    $(this).text( ($(this).text() == 'See more') ? 'See less':'See more' )
})

<强> jsFiddle example

如何在课堂上使用jquery幻灯片切换

1 个答案: