Jquery 先隐藏子对象,然后减小父对象的宽度
我的布局如下:Jquery 先隐藏子对象,然后减小父对象的宽度,jquery,Jquery,我的布局如下: <div id="outerwrap"> <div id="innerwrap"> <div id="centerc">...</div> <div id="rightc" style="font-weight:bold"> </div> <div style
<div id="outerwrap">
<div id="innerwrap">
<div id="centerc">...</div>
<div id="rightc" style="font-weight:bold">
</div>
<div style="background-color:White;height:10px;top:284px;left:0px"></div>
<div id="leftc">..</div>
</div>
<div id="footer"">...</div>
#outerwrap
{
background-color: #EE44E7;
}
#innerwrap
{
background-color: #EE44E7;
margin-right: 200px;
top:0px;
height:100%;
}
#leftc
{
position: absolute;
top: 111px;
left: 0px;
width: 197px;
background-color: #EE44E7;
font-size: 10px;
}
#centerc
{
position: relative;
margin-left: 199px;
padding: 0px;
background-color: white;
}
#rightc
{
position: absolute;
top:111px;
right: 0px;
width: 199px;
color: blue;
background-color: #EE44E7;
font-size: 10px;
}
#footer
{
padding: 0px;
margin: 0px;
width: 100%;
height: 62px;
visibility: hidden;
}
...
..
大概是这样的:
$(document).ready(function() {
$("#leftc").css("width", "20px").children().css("display", "none");
$("#leftc").hover(function() {
$(this).stop();
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
}, function() {
$(this).stop();
$(this).animate({ width: "20px" }).children().css("display", "none");
});
...
});
编辑:我的错,我看错了你的问题,只需选择所有子项并隐藏它们(:
第二次编辑:有关悬停修复,请参见上面的代码。您可以使用stop()
函数停止该元素上的所有动画,以便每次都能重新开始。
如果要通过单击事件执行此操作,只需设置如下标志:
var leftActive = false;
$("#leftc").click(function() {
if (leftActive) {
$(this).animate({ width: "20px" }).children().css("display", "none");
leftActive = false;
} else {
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
leftActive = true;
}
});
我想隐藏所有的子元素,不仅仅是ImagesHanks现在可以工作了。但是有一个问题。当我的鼠标移到leftc的最左边(触摸浏览器的角落)时,也会出现向内/向外悬停…这会导致行为失控…对此有什么建议吗?除了上面的问题,我在想,鼠标可以用“单击”来代替“向内/向外悬停”吗?所以我单击一次,面板显示,然后再次单击,面板隐藏?有可能吗..谢谢你的帮助