我正在使用 JQuery UI,这样我就可以使用 blind 函数向下滑动一个 div,但是,它无法正常工作。
这是我启动的 JSFiddle:http://jsfiddle.net/CBe3w/192/
出于某种原因,在滑动动画完成之前,侧面不会对齐,此时它们会弹出。我怎样才能使边从头到尾都对齐(它们应该始终是box
类的宽度)?
HTML:
<div class="box">
Click Me!
<div class="footer">
Why does it do this?
</div>
</div>
CSS:
.box {
background: #f5f5f5;
width: 250px;
padding: 25px;
}
.footer {
background: red;
padding: 15px 25px;
margin-top: 25px;
margin-left: -25px;
margin-right: -25px;
display: none;
}
JS:
$('.box').click(function() {
$('.footer').toggle("blind");
});
最佳答案
我认为问题在于 jQuery 在切换元素时更改元素属性的顺序,以及您在页脚上设置了负边距这一事实。
您可能会取消 .box 的左右填充,然后将您的 .box 内容放在一个单独的 div 中,其中有边距。不过,这可能是一种“hacky”方式。
这是一个潜在的解决方案
jQuery 保持不变,只有 CSS/HTML 发生了变化。
参见 jsfiddle
HTML
<div class="box">
<div class="content">Click Me!</div>
<div class="footer">
The sides don't pop out anymore!
</div>
</div>
CSS
.box {
background: #f5f5f5;
width: 250px;
/* took off the left and right padding */
padding: 25px 0;
}
.content {
/* "simulates" the padding of .box that you had before */
margin: 0 25px;
}
.footer {
background: red;
padding: 15px 25px;
/* took off the negative margins */
margin-top: 25px;
display: none;
}
关于javascript - 负边距的盲注,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20793970/