亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

手風(fēng)琴效果學(xué)習(xí)總結(jié)

original 2018-12-26 22:20:00 261
abstrait:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按鈕內(nèi)容選擇</title>     <link rel="stylesheet"&nb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>按鈕內(nèi)容選擇</title>
    <link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/x-icon" href="static/images/icon.ico" />
    <link rel="stylesheet" type="text/css" href="static/style1.css">
    <script type="text/javascript" src="static/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.two').css('display','none')
            var one = $('.one')
            var two = $('.two')
            $('.one').each(function(i){
                $(this).click(function(){
                    if($(two[i]).css('display') == 'none'){
                         $(two[i]).slideDown(400)
                    }else{
                         $(two[i]).slideUp(400)
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div class="nav">
        <div class="parent">
            <div class="one">
                <strong>個(gè)人中心</strong>
            </div>
            <div class="two">
                <div><a href="">我的信息</a></div>
                <div><a href="">系統(tǒng)通知</a></div>
                <div><a href="">短信息</a></div>
            </div>
        </div>
        <div class="parent">
            <div class="one">
                <strong>課程中心</strong>
            </div>
            <div class="two">
                <div><a href="">我的課程</a></div>
                <div><a href="">課程資源</a></div>
                <div><a href="">班級統(tǒng)計(jì)</a></div>
                <div><a href="">課程題庫</a></div>
            </div>
        </div>
        <div class="parent">
            <div class="one">
                <strong>校內(nèi)討論</strong>
            </div>
            <div class="two">
                <div><a href="">我的帖子</a></div>
                <div><a href="">新回復(fù)</a></div>
                <div><a href="">課程板塊</a></div>
                <div><a href="">問答中心</a></div>
            </div>
        </div> 
        <div class="parent">
            <div class="one">
                <strong>資源中心</strong>
            </div>
            <div class="two">
                <div><a href="">教學(xué)資源</a></div>
                <div><a href="">教學(xué)經(jīng)歷</a></div>
            </div>
        </div> 
    </div> 
</body>
</html>
*{margin: 0px;padding: 0px;}
.nav{width: 250px;margin: 0px auto;border-top: 2px solid blue;border-bottom: 2px solid blue;margin-top: 50px;}
a{text-decoration: none;color:blue;}
.parent{text-align: center;border-left: 1px solid #282923;border-right:1px solid #282923;}
.one{width: 248px;height: 40px;line-height: 40px;border-bottom: 1px solid #282923;}
.two div{width:248px;height: 35px;line-height: 35px;border-bottom: 1px solid #ccc;}

手風(fēng)琴效果還是比較常用的,好多地方都可以用到,jquery比JavaScript簡單,就是有寫基本的選擇器還是不太清楚,像each(),后期會(huì)多復(fù)習(xí),多寫,慢慢消費(fèi)QQ圖片20181226221315.png

Professeur correcteur:韋小寶Temps de correction:2018-12-27 09:25:41
Résumé du professeur:jQuery是比JavaScript簡單的多,jQuery就是JavaScript封裝而成的,each是遍歷的作用,后期慢慢研究吧!

Notes de version

Entrées populaires