手琴式导航栏

原创 2019-08-07 09:04:46 453
摘要:/* 手琴式 导航栏 *//* * {       margin: 0px;       padding: 0px;       font-size: 14px;       font-family: "微软雅黑";&n

/* 手琴式 导航栏 */


/* * {

       margin: 0px;

       padding: 0px;

       font-size: 14px;

       font-family: "微软雅黑";

   }


   a {

       text-decoration: none;

       color: #36b2f5;

   }


   .nav {

       width: 250px;

       margin: 70px auto;

       border-top: 4px solid #36b2f5;

       border-bottom: 3px solid #36b2f5;

   }


   .nav .one {

       border-bottom: 1px solid #36b2f5;

       border-left: 1px solid #36b2f5;

       border-right: 1px solid #36b2f5;

       height: 40px;

       line-height: 40px;

       text-align: center;

   }


   .two {

       width: 248px;

       border-left: 1px solid #36b2f5;

       border-right: 1px solid #36b2f5;

   }


   .two div {

       height: 35px;

       line-height: 35px;

       text-align: center;

       border-bottom: 1px dotted #36b2f5;

       cursor: cell;

   } */

<!--手琴式,下拉导航栏 -->


<!-- <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="#">我的课程</a></div>

               <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="#">我的帖子</a></div>

               <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="#">教学资源</a></div>

               <div> <a href="#">教学经历</a></div>

           </div>

       </div>

   </div>

   <script>

       $(document).ready(function () {

           var one = $('.one')

           var two = $('.two')

           $('.two').css('display', 'none')

           $('.one').each(function (i) {

               $(this).click(function () {

                   if ($(two[i]).css('display') == 'none') {

                       $(two[i]).slideDown(400)

                   } else {

                       $(two[i]).slideUp(400)

                   }

               })

           })

       })

   </script> -->


批改老师:天蓬老师批改时间:2019-08-07 13:28:39
老师总结:这就是一个简单的事件而已, 并无特别之处, 想一下,如何让你用原生语法 , 可以做出来吗?

发布手记

热门词条