jquery手风琴效果

手风琴效果主要用的是query中的迭代器遍历，以及结点之间的关系，进行整合。本篇给一个简单的例子，进行说明，重点在以下几个方面：

1、jquery each方法的使用

2、jquery boolean类型的开关

3、结点的判断与使用方式

4、jquery 对类中的index的读取

html代码

<div class="x2">
    <div class="item">
        <div class="item1">
             <h4><span class="icon-plus-square"></span>   人事管理</h4>
        </div>
        <div class="item2">
            <ul class="item-1">
                    <li><a href="#">成员查询</a></li>
                    <li><a href="#">成员添加</a></li>
                </ul>
         </div>
    </div> 
    <div class="item">
        <div class="item1">
             <h4><span class="icon-plus-square"></span>   设备管理</h4>
        </div>
        <div class="item2">
            <ul class="item-1">
                    <li><a href="#">设备查询</a></li>
                    <li><a href="#">设备添加</a></li>
                </ul>
         </div>
    </div> 
    <div class="item">
        <div class="item1">
             <h4><span class="icon-plus-square"></span>   预约管理</h4>
        </div>
        <div class="item2">
            <ul class="item-1">
                    <li><a href="#">座位预约</a></li>
                    <li><a href="#">设备预约</a></li>
                </ul>
         </div>
    </div> 
</div>

css样式：

<style type="text/css">
    .item{
        background: blue;
        color:white;
    }
    .item h4{
        width: inherit;
        padding: 10px 10px;
    }
    .item ul{
        margin: 0;
        padding: 0;
    }
    .item ul li a{
        display:block;
        width: inherit;
        color: white;
        /*padding-left: 20px;*/
        padding: 10px 50px;
    }
    .item ul li a:hover{
        background: white;
        color:blue;
    }
    .item1{
        border-bottom: 1px solid darkblue;
    }
   
</style>

jquery实现手风琴部分

<script type="text/javascript">
$(document).ready(function(){
    var len = $('.item').length;
    var flag = new Array();
    for( var i = 0; i < len ; i++){
        flag[i] = true;                   //flag是开关
    }
    $('.item1').each(function(index){   //each遍历所有item1类下的值，index表示当前值
       $(this).click(function(){          //this监听当前按钮的位置，改变对应的效果
            if(flag[index]){
                 $(this).next().css("display","none");  //next()兄弟结点的判断，改变下一个兄弟的样式
                 flag[index]=false;
                
            }else {
                 $(this).next().css("display","block");
                 flag[index] =true;
            }
          
        })
    })
   
});
</script>

效果图：

展开：

关闭：