jQuery手风琴效果

Posted 2022-01-17 wq2333

引入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>