jquery实现手风琴菜单

Original 2019-04-27 12:51:41 216
abstract:<html> <head>     <title>手风琴菜单</title>     <script src="js/jquery.js"  type="text/javascript">&
<html>
<head>
    <title>手风琴菜单</title>
    <script src="js/jquery.js"  type="text/javascript"> </script>
    <style type="text/css">
        *{ margin: 0; padding: 0; font-size: 14px; font-family: "微软雅黑"}
        a{ text-decoration: none; color: #36b2f5;}

        .nav{ width: 250px; margin: 50px auto; border-bottom: 3px solid #36b2f5;border-top: 4px solid #36b2f5;}
        .one{ width:250px; height: 40px; line-height: 40px;text-align: center;
            border-left: 1px solid #36b2f5;border-right: 1px solid #36b2f5;border-bottom: 1px solid #36b2f5;}
        .two{ width: 250px; text-align: center; border-left: 1px solid #36b2f5;border-right: 1px solid #36b2f5;}
        .two div{  height: 35px; line-height: 35px;border-bottom: 1px dotted #36b2f5;}
    </style>

    <script type="text/javascript">
        $(function(){
            $(".two").css("display","none");//使用css方式隐藏
            //$(".two").hide();//使用hide函数方式隐藏
            let one = $(".one");
            let 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>个人中心</strong>
            </div>
            <div class="two">
                <div><a href="#">我的信息</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="#">课程1</a></div>
                <div><a href="#">课程2</a></div>
                <div><a href="#">课程3</a></div>
            </div>
        </div>

        <div class="parent">
            <div class="one">
                <strong>校内讨论</strong>
            </div>
            <div class="two">
                <div><a href="#">校内讨论1</a></div>
                <div><a href="#">校内讨论2</a></div>
                <div><a href="#">校内讨论3</a></div>
            </div>
        </div>

        <div class="parent">
            <div class="one">
                <strong>我的课程</strong>
            </div>
            <div class="two">
                <div><a href="#">我的课程1</a></div>
                <div><a href="#">我的课程2</a></div>
                <div><a href="#">我的课程3</a></div>
            </div>
        </div>



    </div>

</body>
</html>


Correcting teacher:查无此人Correction time:2019-04-27 17:30:18
Teacher's summary:完成的不错,可以把常用的css样式写到一个文件,下次直接可以使用。继续加油

Release Notes

Popular Entries