jquery展開收縮列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <style type="text/css">
        *{margin:0;padding:0;}
        body{max-width: 640px; margin: 0 auto; font-family: 'Microsoft Yahei'}
        .box{ overflow: hidden; }
        .box dl{ overflow: hidden; margin-bottom: 10px; border: 1px solid #ddd; }
        .box dt{ height: 45px; line-height: 45px; padding: 0 10px; background: #FADFF6; font-size: 18px; position: relative; cursor: pointer;}
        .box dt span{ display: block; width: 0; height: 0; border-left:8px solid transparent; border-right: 8px solid transparent;  position: absolute;right: 10px; top:15px; border-top: 8px solid #98479B}
        .box dt span.on{
                transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -o-transform: rotate(180deg);
            }
        .box dd{ overflow: hidden; padding: 10px; line-height: 34px; display: none;border-top: 1px solid #ddd;  }
    </style>
</head>
<body>
<div class="box" id="box">
    <dl>
        <dt>買書是最划算的投資<span></span></dt>
        <dd style="display: block;">
            <p>古人云:“書中自有黃金屋,書中自有顏如玉。”這說明先賢們早認識到,買書是最划算的投資。</p>
            <p>我剛出道時,拿着非常微薄的工資。有一次向主管抱怨道:“現在的書真貴啊,這點工資連飯都吃不起,更別說買書了!”主管對我說:“不要吝惜買書的錢,寧可忍着不吃飯,也不要忍着不買書,因爲買書是回報率最高的投資。”</p>
            <p>主管的話讓我非常震動。後來,我看到喜歡的書時,再也沒有手軟過。通過不斷學習,我的開發能力不斷提高,工資水平也大幅提高。一年後,我一個月工資的漲幅,就足夠買兩年的書了。你說,還有比這更划算的投資嗎?</p>
            <p>一本書,哪怕只有一頁紙是有用的,它所將產生的潛在價值,也會遠遠超過書本身的價格。當然,書不在多,踏踏實實消化掉一本好書,比泛泛而讀10本普通書,要有價值得多。</p>
        </dd>
    </dl>
    <dl>
        <dt>只學習與工作相關的東西<span></span></dt>
        <dd>
            <p>我曾發現不少程序員在學習方面找不到方向,一會兒學學C#,一會兒學學Java,看了最新的編程語言排行榜,又覺得該學C++。這樣左抓抓,右撓撓,只會讓你覺得更癢。</p>
            <p>學習最忌三心二意。俗話說:“傷其十指不如斷其一指”,每門都學一點,還不如專心學好一個方向。這個道理誰都懂,可是又該學哪個方向呢?難道只能跟着感覺走嗎?不!最實際的方向,應該跟着工作走,工作需要什麼,我們就學什麼,把工作需要的技能熟練掌握,有很多好處。</p>
            <p>首先,可以集中精力,在某一方面鑽研得更加深入。所謂“百招會不如一招絕”,有了絕招,你還怕不能在“武林”立足嗎?《天龍八部》中的慕容復武功博學無比,最後還不是被只會一招六脈神劍的段譽打得落花流水?</p>
            <p>其次,可以學得更快、更深入,因爲學習更具有針對性,而且可以立即在工作中運用,可以馬上檢驗出學習的效果。對存在的問題進行深入研究,掌握的知識也會更加牢固。</p>
        </dd>
    </dl>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        var obj = $('#box');
        obj.find('dt').on('click',function(){
            var thisSpan = $(this).children('span');
            if(!thisSpan.hasClass('on')){
                obj.find('dt').children('span').removeClass('on');
                obj.find('dd').hide();
                thisSpan.addClass('on');
                $("html,body").scrollTop(thisSpan.offset().top-10);
                $(this).siblings("dd").show();
            }else{
                thisSpan.removeClass('on');
                $(this).siblings('dd').hide();
            }
        })
    })
</script>
</body>
</html>


原文鏈接:http://www.cnblogs.com/huanghuali/p/6635185.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章