Question

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

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

我尝试将内部内容宽度设置为向下动画，但是当您设置宽度动画时，它会从两侧进入，因此该技巧无法工作，例如，内部内容应该与第一列的右侧对齐，但如果您使用float：右边它会弄乱中间列中的内容，所以第一行中的内容使用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为50px（margin-left）宽于div.one div。至少，它似乎对我有用。 http://jsfiddle.net/VJmfq/1/

使用css表时折叠垂直菜单

1 个答案: