1. 程式人生 > >文章收起與展開效果的實現

文章收起與展開效果的實現

方式一(display):

<style>
    div{width:800px;}
    p{text-indent:2em;}
    #box1{display:none;}
</style>

<div id="box1">
    <p>從基層上看去,中國社會是鄉土性的。我說中國社會的基層是鄉土性的,那是因為我考慮到從這基層上曾長出一層比較上和鄉土基層不完全相同的社會,而且在近百年來更在東西方接觸邊緣上發生了一種很特殊的社會。這些社會的特性我們暫時不提,將來再說。我們不妨先集中注意那些被稱為土頭土腦的鄉下人。他們才是中國社會的基層。</p
>
<p>我們說鄉下人土氣,雖則似乎帶著幾分藐視的意味,但這個土字卻用得很好。土字的基本意義是指泥土。鄉下人離不了泥土,因為在鄉下住,種地是最普通的謀生辦法。在我們這片遠東大陸上,可能在很古的時候住過些還不知道種地的原始人,那些人的生活怎樣,對於我們至多隻有一些好奇的興趣罷了。以現在的情形來說,這片大陸上最大多數的人是拖泥帶水下田討生活的了。我們不妨縮小一些範圍來看,三條大河的流域已經全是農業區。</p> <a href="#">收起</a> </div> <div id="box2"> <p
>
從基層上看去,中國社會是鄉土性的。我說中國社會的基層是鄉土性的,那是因為我考慮到從這基層上曾長出一層比較上和鄉土基層不完全相同的社會,而且在近百年來更在東西方接觸邊緣上發生了一種很特殊的社會。這些社會的特性我們暫時不提,將來再說。我們不妨先集中注意那些被...</p> <a href="#">展開</a> </div> <script type="text/javascript" > $('#box1').find('a').click(function(e) { $('#box1').hide(); $('#box2'
).show(); }); $('#box2').find('a').click(function(e) { $('#box2').hide(); $('#box1').show(); });
</script>

方式二(substring):

<style>
    div{width:800px;}
    p{text-indent:2em;}
</style>
<div id="box">
    <p>從基層上看去,中國社會是鄉土性的。我說中國社會的基層是鄉土性的,那是因為我考慮到從這基層上曾長出一層比較上和鄉土基層不完全相同的社會,而且在近百年來更在東西方接觸邊緣上發生了一種很特殊的社會。這些社會的特性我們暫時不提,將來再說。我們不妨先集中注意那些被稱為土頭土腦的鄉下人。他們才是中國社會的基層。</p>
    <p>我們說鄉下人土氣,雖則似乎帶著幾分藐視的意味,但這個土字卻用得很好。土字的基本意義是指泥土。鄉下人離不了泥土,因為在鄉下住,種地是最普通的謀生辦法。在我們這片遠東大陸上,可能在很古的時候住過些還不知道種地的原始人,那些人的生活怎樣,對於我們至多隻有一些好奇的興趣罷了。以現在的情形來說,這片大陸上最大多數的人是拖泥帶水下田討生活的了。我們不妨縮小一些範圍來看,三條大河的流域已經全是農業區。</p>
</div>
    <a href="#">收起</a>
<script type="text/javascript" >
var str=$('#box').html();
var key=true;
$('a').click(function(e) {
    if(key==true){
        $('#box').html(str.substring(0, 150)+'...');
        $('a').html('展開');
        key=false;
    }
    else{
        $('#box').html(str);
        $('a').html('收起');
        key=true;
    }
})
</script>