弹出层与折叠菜单作业

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层与折叠菜单</title>
<script src="新建文件夹 (2)/jquery-3.0.0/jquery-3.0.0.min.js"></script>
<script>
   $(function(){
   $(".btn").click(function(){
   $(".box").css("display","block");
   $(".close").click(function(){
   $(".box").css("display","none")

   })
   // $(".box").show();
   //$(".box").hide();


   })

   })

   $(function(){
   $(".mune").first().show();

   $(".nav").click(function(){
   $(this).next(".mune").slideToggle().siblings(".mune").slideUp();

   })

   })

</script>
<style>
.wrap{position:fixed; top:300px; left:150px;}
.btn{ width:100px; height:30px; background:#CCC; text-align:center; line-height:30px; }
.box{ width:1000px; height:800px; background:#CCC; margin:0 auto; position:relative; display:none;}
.close{ width:30px; height:30px; background:#000; font-size:16px; color:#FFF; text-align:center; line-height:30px; position:absolute; right:-30px}
.nav{ width:100px; height:30px; background:#F00; text-align:center; line-height:30px;border-bottom:#FFF 1px solid; color:#FFF;}
.mune{ display:none; }
li{ list-style:none; width:80px; height:20px; background:#CCC; text-align:center; line-height:20px; padding:10px; border-bottom:#FFF 1px solid; }
a{ text-decoration:none; color:#505050;}
</style>
</head>

<body>
<div class="btn">登录</div>
<div class="box">
        <div class="close">×</div>
      </div>

      <div class="gdt" style="height:1500px"></div>

            <div class="wrap">
            <div class="nav">菜单一</div>
                  <div class="mune">
                     <li><a href="#">内容1</a></li>
                     <li><a href="#">内容2</a></li>
                     <li><a href="#">内容3</a></li>
                     <li><a href="#">内容4</a></li>
                     <li><a href="#">内容5</a></li>

                  </div>

                  <div class="nav">菜单二</div>
                  <div class="mune">
                     <li><a href="#">内容1</a></li>
                     <li><a href="#">内容2</a></li>
                     <li><a href="#">内容3</a></li>
                     <li><a href="#">内容4</a></li>
                     <li><a href="#">内容5</a></li>

                  </div>

                  <div class="nav">菜单三</div>
                  <div class="mune">
                     <li><a href="#">内容1</a></li>
                     <li><a href="#">内容2</a></li>
                     <li><a href="#">内容3</a></li>
                     <li><a href="#">内容4</a></li>
                     <li><a href="#">内容5</a></li>

                  </div>

   </div>
</body>
</html>

[作业] 弹出层与折叠菜单作业

共0个回复最后回复于 2018-7-30 16:03

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 弹出层与折叠菜单作业

共0个回复 最后回复于 2018-7-30 16:03

共0个回复最后回复于 2018-7-30 16:03