jquery - 我想将 div 扩展到其隐藏的子 div 的左侧？

Question

我想制作隐藏有子 div 的侧边栏 div。当翻转父 div 时，它将展开并且子 div 暴露，并且在推出 div 时恢复到其原始大小折叠。 我想要我的侧边栏类似于这个。 http://www.hosting.com/它的联系人侧边栏，我真的很想要这样。

CSS

#Sidebar {
    width: 40px;
    height: 40px;
    margin-right: 0px;
    top: 300px;
    position: fixed;
    right: 0px;
    background-image: url(chat.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    background-color: #F90;
    }
#Sidebar:hover {
    height: 50px;
    width: 100px;
}
.divchild {
    height: 25px;
    width: 25px;
    background-color: #0F3;
    top: 5px;
    right: 0px;
    margin: auto;
    position: relative;
}

HTML

<a href="#">
<div class="Sidbaredges" id="Sidebar">
 <div class="divchild"></div>
 </div>
</a>

Answer 1

试试这个

http://jsfiddle.net/mqzMx/

CSS

#Sidebar {
    width: 40px;
    height: 40px;
    margin-right: 0px;
    top: 300px;
    position: fixed;
    right: 0px;
    background-image: url(chat.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    background-color: #F90;


}
#Sidebar:hover {
    height: 50px;
    width: 100px;
    float:left;
}
.divchild {
    height: 25px;
    width: 25px;
    background-color: #0F3;
    top: 7px;
    left: 10px;
    margin: auto;
    position: relative;
    text-align:left;
    display:inline-block;
}