Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957041
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
jq手风琴效果

分类： HTML5

2018-06-01 15:24:44

不同的状态，执行的不同的代码

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>手风琴效果</title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             .list{
  12.                 width:200px;
  13.                 margin: 20px auto 0px;
  14.                 border: 1px solid #eee;
  15.             }
  16.             .list-con{
  17.                 width: 100%;
  18.                 height: 100%;
  19.             }
  20.             .list-con-item{
  21.                 width: 100%;
  22.                 padding: 10px;
  23.                 box-sizing: border-box;
  24.                 /*cursor: pointer;*/
  25.                 
  26.             }
  27.             
  28.             .list-con-item img{
  29.                 width: 20px;
  30.                 height: 20px;
  31.                 display: inline-block;
  32.                 vertical-align: middle;
  33.                 transition: all 0.3s;
  34.                 
  35.                 
  36.             }
  37.             
  38.             .xunazhuan{
  39.                 transition: all 0.3s;
  40.                 transform: rotate(90deg);
  41.             }
  42.             .xunazhuan1{
  43.                 transition: all 0.3s;
  44.                 transform: rotate(-0deg);
  45.             }
  46.             
  47.             .con{
  48.                 display: none;
  49.             }
  50.             .list-con .my_firstlist{
  51.                 display: block;
  52.             }
  53.             .list-con .my_sanjiao{
  54.                 transform:rotate(90deg);
  55.             }
  56.             ul , ol li{
  57.                 list-style-type:none ;
  58.                     
  59.             }
  60.             .con li{
  61.                 border-bottom: 1px solid #eee;
  62.                 padding: 20px;
  63.             }
  64.             .con li:last-child{
  65.                 border: none;
  66.             }
  67.             
  68.         </style>
  69.     </head>
  70.     
  71.     <body>
  72.         <div class="list">
  73.             <div class="list-con">
  74.                 <div class="list-con-item myfirstClick">
  75.                     <span ><img class="my_sanjiao" src="img/sanjiao.png" alt="" /></span>
  76.                     圈子群众联盟
  77.                 </div>
  78.                 <div class="con my_firstlist">
  79.                     <ul>
  80.                         <li>香蕉</li>
  81.                         <li>苹果</li>
  82.                         <li>葡萄</li>
  83.                         <li>鸭梨</li>
  84.                         <li>榴莲</li>
  85.                     </ul>
  86.                 </div>
  87.             </div>
  88.             <div class="list-con">
  89.                 <div class="list-con-item">
  90.                     <span ><img class="mysanjiao" src="img/sanjiao.png" alt="" /></span>
  91.                     圈子群众联盟
  92.                 </div>
  93.                 <div class="con">
  94.                     <ul>
  95.                         <li>香蕉</li>
  96.                         <li>苹果</li>
  97.                         <li>葡萄</li>
  98.                         <li>鸭梨</li>
  99.                         <li>榴莲</li>
  100.                     </ul>
  101.                 </div>
  102.             </div>
  103.             <div class="list-con">
  104.                 <div class="list-con-item">
  105.                     <span ><img class="mysanjiao" src="img/sanjiao.png" alt="" /></span>
  106.                     圈子群众联盟
  107.                 </div>
  108.                 <div class="con">
  109.                     <ul>
  110.                         <li>香蕉</li>
  111.                         <li>苹果</li>
  112.                         <li>葡萄</li>
  113.                         <li>鸭梨</li>
  114.                         <li>榴莲</li>
  115.                     </ul>
  116.                 </div>
  117.             </div>
  118.             <div class="list-con">
  119.                 <div class="list-con-item">
  120.                     <span ><img class="mysanjiao" src="img/sanjiao.png" alt="" /></span>
  121.                     圈子群众联盟
  122.                 </div>
  123.                 <div class="con">
  124.                     <ul>
  125.                         <li>香蕉</li>
  126.                         <li>苹果</li>
  127.                         <li>葡萄</li>
  128.                         <li>鸭梨</li>
  129.                         <li>榴莲</li>
  130.                     </ul>
  131.                 </div>
  132.             </div>
  133.             <div class="list-con">
  134.                 <div class="list-con-item">
  135.                     <span ><img class="mysanjiao" src="img/sanjiao.png" alt="" /></span>
  136.                     圈子群众联盟
  137.                 </div>
  138.                 <div class="con">
  139.                     <ul>
  140.                         <li>香蕉</li>
  141.                         <li>苹果</li>
  142.                         <li>葡萄</li>
  143.                         <li>鸭梨</li>
  144.                         <li>榴莲</li>
  145.                     </ul>
  146.                 </div>
  147.             </div>
  148.             <div class="list-con">
  149.                 <div class="list-con-item">
  150.                     <span ><img class="mysanjiao" src="img/sanjiao.png" alt="" /></span>
  151.                     圈子群众联盟
  152.                 </div>
  153.                 <div class="con">
  154.                     <ul>
  155.                         <li>香蕉</li>
  156.                         <li>苹果</li>
  157.                         <li>葡萄</li>
  158.                         <li>鸭梨</li>
  159.                         <li>榴莲</li>
  160.                     </ul>
  161.                 </div>
  162.             </div>
  163.             
  164.         </div>
  165.     </body>
  166.     <script type="text/javascript" src="js/jquery.min.js"></script>
  167.     <script type="text/javascript">
  168.         $(document).ready(function(){
  169.             //创建一个状态的标识
  170.             当s=0时，也就是点击第一个的时候，改变初始化的状态 目标：和其他的兄弟状态一样
  171.             
  172.             其他的情况就是没有点击第一个的时候
  173.            $(".list-con-item").click(function(){
    var k = $(this).parent().index()
    if(k==0){
    $(this).find("img").toggleClass("my_sanjiao");
    $(this).parent(".list-con").find(".con").slideToggle();
    $(this).parent(".list-con").siblings().find("img").removeClass("xunazhuan").removeClass("my_sanjiao")
    $(this).parent(".list-con").siblings().find(".con").slideUp();

    }else{
    $(this).find("img").removeClass("my_sanjiao").toggleClass("xunazhuan");
    $(this).parent(".list-con").find(".con").slideToggle();
    $(this).parent(".list-con").siblings().find("img").removeClass("xunazhuan").removeClass("my_sanjiao")
    $(this).parent(".list-con").siblings().find(".con").slideUp();
    }




    })
  174.     </script>
  175. </html>
效果图如下：

阅读(976) | 评论(0) | 转发(0) |
0

上一篇：网页设计中html5的video 标签如何写才能使得视频文件填满整个div？

下一篇：小程序模拟循环数据

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6