使用css表格时折叠垂直菜单

Question

我有一个由 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 表格布局，这甚至不会移动我认为的列

Answer 1

好的，我认为这完全与宽度有关。您需要从div.two 中删除宽度，然后在您的动画函数中，确保您始终以比div.one div 宽50px（左边缘）的div.one 结束。至少，它似乎对我有用。 http://jsfiddle.net/VJmfq/1/