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

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

这是我的小提琴

现在我注意到第一列甚至不会移动，除非你要么完全显示：没有内部内容，要么将其内容宽度设置为0px（但由于我希望该列稍微暴露，我真的不想删除其内容）

我试着动画内部内容宽度，但是当你动画宽度时，它是从两边来的，所以这个技巧是行不通的，例如，内部内容应该与第一列的右侧对接，但是如果你使用浮点：它会把中间列中的内容弄乱，因此，第一行中的内容使用左边距向上靠着一侧…如果我设置宽度向下的动画，它不会从左侧设置动画，宽度同时从两侧变小

$(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表格布局，我认为这甚至不会移动列。好的，我认为这都是关于宽度的。您需要从

div.two

中删除宽度，然后在动画功能中，确保最终的

div.one

比

div.two

宽50px（左边距）。至少，它似乎对我有用

好吧，我想这都是关于宽度的问题。您需要从

div.two

中删除宽度，然后在动画功能中，确保最终的

div.one

比

div.two

宽50px（左边距）。至少，它似乎对我有用

“CSS表格”是一个东西吗？哈哈，是的……显示：表格和显示：主容器“CSS表格”中容器的表格单元格是一件事吗？哈哈，是的…显示：表格和显示：主容器内容器的表格单元格，这确实有帮助…我使用左边距使其工作，这样我可以使内容移动到一边，容器可以根据需要变小…在我的网站上，当它对列中的li中的巨大图像进行动画处理后，从容器……我想我只需要分别为容器内的每个对象设置动画，以实现所有对象向左移动的效果。。。我会等一等，然后选择这个作为答案，看看是否有其他人加入到令人惊叹的jquery或其他东西中来……我会给它几个小时……谢谢！有没有办法强制列移动marginLeft:-197px？将所有元素移动到内部会变得非常混乱，当我减小宽度时，它无法处理内部的图像。这是怎么回事：我将col1设置为width:0（这使其具有一个类似于常规td的“收缩以适应”属性）然后对内部div.ya的宽度进行了动画制作，这确实有帮助…我使用左边距使其工作，这样我可以使内容移动到一边，容器可以根据需要变小…在我的网站上，在动画制作完成后，列中li中的巨大图像会从容器中弹出…我想我只需要进行动画制作容器内的每一个物体都是分开的，以达到物体向左移动的效果。。。我会等一等，然后选择这个作为答案，看看是否有其他人加入到令人惊叹的jquery或其他东西中来……我会给它几个小时……谢谢！有没有办法强制列移动marginLeft:-197px？将所有元素移动到内部会变得非常混乱，当我减小宽度时，它不会与内部图像一起工作。这是怎么回事：我将col1设置为width:0（这使其具有一个类似于常规td的“收缩以适应”（shrink to fit）属性），然后设置该内部div的宽度的动画。