jQuery手风琴效果

标签：top   手风琴   script   引入   java   width   一个   height   dde   

引入jq：<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

html：

<div id="acc">
            <ul>
                <li class="active">
                    <h3 class="active">标题1</h3>
                    <div><img src="bg1.jpg"></div>
                </li>
                <li>
                    <h3>标题2</h3>
                    <div><img src="bg2.jpg"></div>
                </li>
                <li>
                    <h3>标题3</h3>
                    <div><img src="bg3.jpg"></div>
                </li>
                <li>
                    <h3>标题4</h3>
                    <div><img src="bg4.jpg"></div>
                </li>
                <li class="last">
                    <h3>标题5</h3>
                    <div><img src="bg5.jpg"></div>
                </li>
            </ul>

        </div>

<!--分割线-->

css:
<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                border: none;
                display: block;
            }
                #acc {
                    width: 640px;
                    height: 140px;
                    
                    margin: 0 auto;
                }
                #acc ul  {
                    border-left:1px solid #ddd ;
                    height: 140px;
                    position: relative;
                }
                #acc ul li {
                    width:50px;
                    height: 138px;
                    border: 1px solid #ddd;
                    float: left;
                    list-style: none;
                    border-left: 0;
                    position: relative;
                    overflow:hidden;
                }
                #acc ul li.active {
                    width: 434px;
                    
                }
                #acc ul li h3 {
                    font-size: 14px;
                    color: #000;
                    font-weight:100;
                    width: 14px;
                    height: 98px;
                    padding: 40px 18px 0;
                    
                }
                #acc ul li h3.active {
                    background: #f42760;
                    color: #fff;
                
                }
                #acc ul li  div {
                    width: 383px;
                    height: 138px;
                    background: blue;
                    position: absolute;
                    top: 0;
                    left: 50px;
                    border-left:1px solid #ddd ;
                    z-index:0;
                }
                #acc ul li img{
                    width: 383px;
                    height: 138px;
                    
                }
                #acc ul li.last {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                
        </style>

<!--分割线-->

jquery：

<script type="text/javascript">
            //.find()这个函数是找出正在处理的元素的后代元素的好方法
            //.end()回到最近的一个"破坏性"操作之前。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作
            $(function(){
                $("#acc li").mouseover(function(){
                    $(this).stop().animate({"width":"434px"},500).find("h3").addClass("active").end()
                    .siblings().stop().animate({"width":"50px"},500).find("h3").removeClass("active")
                })
            })
        </script>

jQuery手风琴效果

标签：top   手风琴   script   引入   java   width   一个   height   dde   

原文地址：https://www.cnblogs.com/wq2333/p/11038065.html