zoukankan      html  css  js  c++  java
  • 手风琴案例

    html文件:

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>手风琴案例</title>
      <style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}
        
        .parentWrap {
           200px;
          text-align:center;
          
        }
        
        .menuGroup {
          border:1px solid #999;
          background-color:#e0ecff;
        }
        
        .groupTitle {
          display:block;
          height:20px;
          line-height:20px;
          font-size: 16px;
          border-bottom:1px solid #ccc;
          cursor:pointer;
        }
        
        .menuGroup > div {
          height: 200px;
          background-color:#fff;
          display:none;
        }
      
      </style>
      
    <script src="jquery-1.12.4.js"></script>
      <script>
          $(function () {
              //思路分析:
              //1. 给所有的span注册点击事件,让当前span的兄弟div显示出来
              $(".groupTitle").click(function () {
                //下一个兄弟:nextElementSibling
                //链式编程:在jQuery里面,方法可以一直调用下去。
                $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
              });
          });
      </script>
    </head>
    <body>
    <ul class="parentWrap">
      <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
      </li>
    </ul>
    </body>
    </html>
    

      

  • 相关阅读:
    经典算法之猴子吃桃
    VS2008C#Sqlserver2008数据库的连接以及增删改查
    在数组中随机插入数字且不重复
    菲波那切数列
    Js之AJAX
    经典算法之冒泡排序
    《Head First 设计模式》 第一章 设计模式入门
    Redis 的 IO 多路复用,学习研究
    高性能MySQL 第十章 复制 Part2
    高性能MySQL 第十一章 可扩展的MySQL
  • 原文地址:https://www.cnblogs.com/luwn/p/12709487.html
Copyright © 2011-2022 走看看