码迷,mamicode.com
首页 > Web开发 > 详细

ASP动态网页设计与Ajax技术----制作折叠式菜单

时间:2019-12-24 15:22:25      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:charset   height   ffffff   min   utf-8   cli   bsp   ajax技术   otto   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作折叠式菜单</title>
</head>
<style type="text/css">
 ul{list-style: none; margin: 0; padding: 0;}
 #accordion{width: 200px;}
 #accordion li{border-bottom: 1px solid #ED9F9F;}
 #accordion a{
  font-size: 14px; color: #ffffff; text-decoration: none;
  display: block; padding: 5px 5px 5px 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  background-color: #c11136; height: 1em;
 }
 #accordion a:hover{background-color: #990020; color: #ffff00;}
 #accordion li ul li{border-top: 1px solid #ED9F9F;}
 #accordion li ul li a{
  padding: 3px 3px 3px 0.5em;
  border-left: 28px solid #a71f1f;
     border-right: 1px solid #711515;
  background-color: #e85070;
 }
 #accordion li ul li a:hover{
  background-color: #c2425d;
  color: #ffff00;
 }
 </style>
<body><script src="jquery-3.4.1.min.js"></script>
 <script>
 $(function(){
  $("#accordion>li>a+*:not(:first)").hide();
  $("#accordion>li>a").click(function(){
   $(this).parent().parent().each(function(){
    $(">li>a+*",this).slideUp();
   });
   $("+*",this).slideDown();
  });
 });
 </script>
 <ul id="accordion">
 <li>< a href=" ">学 校 概 况</ a>
  <ul>
  <li>< a href="">学校介绍</ a></li>
   <li>< a href="">大学章程</ a></li>
   <li>< a href="">现任领导</ a></li>
   <li>< a href="">历任领导</ a></li>
   <li>< a href="">领导关怀</ a></li>
   <li>< a href="">学校荣誉</ a></li>
  </ul></li>
 <li>< a href="#">机 构 设 置</ a>
  <ul>
  <li>< a href="">教学单位</ a></li>
   <li>< a href="">党政机构</ a></li>
   <li>< a href="">科研单位</ a></li>
   <li>< a href="">教辅单位</ a></li>
  </ul></li>
 <li>< a href="#">教 育 教 学</ a>
  <ul>
  <li>< a href="">本科生教育</ a></li>
   <li>< a href="">博士生教育</ a></li>
   <li>< a href="">硕士生教育</ a></li>
   <li>< a href="">预科生教育</ a></li>
   <li>< a href="">继续教育与职业教育</ a></li>
   <li>< a href="">留学生教育</ a></li>
   <li>< a href="">教学团队与特色专业</ a></li>
  </ul></li>
 <li>< a href="#">民 大 文 化</ a>
  <ul>
  <li>< a href="">民大精神</ a></li>
   <li>< a href="">办学理念</ a></li>
   <li>< a href="">民大校训</ a></li>
   <li>< a href="">学校标识</ a></li>
   <li>< a href="">印象民大</ a></li>
  <li>< a href="">印象民大</ a></li>
   <li>< a href="">民大先贤</ a></li>
   <li>< a href="">和谐校园</ a></li>
   </ul></li>
   </ul>
</body></center>

ASP动态网页设计与Ajax技术----制作折叠式菜单

标签:charset   height   ffffff   min   utf-8   cli   bsp   ajax技术   otto   

原文地址:https://www.cnblogs.com/sihuan/p/12091554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!