Question

我正在使用JQuery UI，因此我可以使用盲函数向下滑动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");
});

Answer 1

我认为问题在于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;
}

Answer 2

您根本不需要jQuery UI： LIVE DEMO

$('.box').click(function() {
    $('.footer').slideToggle();
});

<div class="box">
    <h3>Click Me!</h3>
    <div class="footer">
        See how the sides popped Greatly?
    </div>
</div>

.box {
    background: #f5f5f5;
    width: 300px;
    padding-bottom: 15px;
}
.box h3{
    padding:25px 25px 10px;
}
.footer {
    background: red;
    padding: 15px 25px;
    display: none;
}

Answer 3

解释：Jquery UI盲效将设置margin：0，同时为元素的高度设置动画。

你将不得不重新设计你的html来拆分你的.box以删除它的填充，否则，修补jquery-ui javascript以从效果器中移除'margin：0'，

你可以通过定位你的内部容器'相对'来解决这个问题，所以不需要重新制作html。

.footer {
  background: none repeat scroll 0 0 #FF0000;
  display: none;
  left: -20px;
  margin-top: 25px;
  padding: 15px 25px;
  position: relative;
  right: 0;
  width: 100%;
}

jsFiddled here

盲目负边缘

3 个答案: