负边距盲注

Bagwell 发表于 Dev

巴格韦尔

我正在使用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");
});

乔希·比姆（Josh Beam）

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