我想用隐藏的子 div 向左扩展 div？答案

【问题标题】：i want to expand div to left with its hidden child divs?我想用隐藏的子 div 向左扩展 div？
【发布时间】：2013-07-14 15:46:06
【问题描述】：

我想制作隐藏了子 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>

【问题讨论】：

标签： jquery html css

【解决方案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;
}

【讨论】：

【解决方案2】：

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function mouse_over()
{
    document.getElementById('divchild').style.display = 'block';
}
function mouse_out()
{
    document.getElementById('divchild').style.display = 'none';
}
</script>
<style type="text/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;
}

</style>
<meta charset="UTF-8">
<title>css test</title>
</head>
<body>
<a href="#">
<div class="Sidbaredges" id="Sidebar" onMouseOver="mouse_over();" onMouseOut="mouse_out();">
  <div class="divchild" id="divchild" style="display:none;"></div>
</div>
</a>
</body>
</html>

我也使用 javascript。

【讨论】：

【解决方案3】：

这把小提琴用对了css和jquery

http://jsfiddle.net/UcQf4/3/

【讨论】：

【解决方案4】：

查看这个 DEMO http://jsfiddle.net/yeyene/hGKLj/

$(document).ready(function () {
    $("#Sidebar, #Sidebar .divchild").mouseover(function () {
        $(this).stop().animate({ right: '0px'}, 600);
    }).mouseout(function () {
        $(this).stop().animate({ right: '-170px'}, 600);
    });
});

【讨论】：

这是一项很棒的工作，但为什么这在我的浏览器和 Dreamweaver 上不起作用？ :(
TypeError: $(...) is undefined [Break On This Error] $(document).ready(function () { 在这一行我的 firebub 显示我上面提到的错误。及其无法在我的 Dreaweaver 和任何浏览器中运行。
你包含 jquery 库吗？像这样...