1

我有一个由 css 表组成的 3 列布局，因此每一列都可以完美地填充浏览器。第一列实际上是一个菜单，我需要它在单击时隐藏/向左移动，中间列填充该空间。它实际上不应该完全移出屏幕，而是稍微露出一点，以便用户可以单击该区域以使其重新进入动画。

这是我的小提琴... http://jsfiddle.net/VJmfq/

现在我注意到第一列甚至不会移动，除非你完全显示：没有里面的内容或将其内容宽度设置为 0px（但我希望列有点暴露，我真的不想消除它的内容）。

我尝试将内部内容的宽度向下设置动画，但是当您对宽度进行动画处理时，它会从两侧进入，因此该技巧不起作用，例如，内部内容应该与第一列的右侧对接，但如果您使用 float:right它弄乱了中间列中的内容，因此第一行中的内容使用 margin-left 靠在一边...如果我将宽度向下设置动画，它不会从左侧进行动画处理，宽度从两者都变小双方同时。

$(document).ready(function() {
$(".two").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
    //Show before animation!
    $(".one").stop().animate({width:"197px"}, 170);
    $(".one div").stop().animate({width:"137px"}, 310, function(){

    });
    $(this).removeClass("isDown");
} else {
    //Hide after animation!
    $(".one").stop().animate({width:"10px"}, 310);
    $(".one div").stop().animate({width:"5px"}, 310, function(){

    });
    $(this).addClass("isDown");
}
return false;
});
});

就像我说的那样，我可以通过减小它的宽度来让它在没有内容的情况下移动，但是我提供的代码试图用里面的内容来做它，所以它甚至不能真正工作。

我希望能够只说第一列 marginLeft:-185px 并用它拉中间部分，但由于 css 表格布局，我认为这甚至不会移动我认为的列

4

1 回答 1

1

好的，我认为这都是关于宽度的。您需要从 中删除宽度div.two，然后在您的动画函数中，确保您最终总是div.one比div.one div. 至少，它似乎对我有用。 http://jsfiddle.net/VJmfq/1/

于 2013-08-23T18:17:12.883 回答