jQuery - 滑动垂直对齐列

Question

我有两列，它们都向左浮动。

在左列内，我有一个“触发器”来隐藏右列，这使得当右列隐藏时左列展开 100%。现在我可以让右列重新出现，但问题是右列包裹在左列下方(当然，左列有 100% 宽度)，而不是像最初开始时那样紧挨着它。

我不是 jQuery/JavaScript 程序员，但我认为我的 jQuery 代码朝着好的方向发展。

这是我的 HTML:

<div id="wrapper">
  <div id="left-col">
  <div id="trigger"><a href="#">Toggle</a></div>
    <p>...</p>
  </div>
  <div id="right-col">Right Column</div>
  <br class="clear">
</div>

这是我迄今为止拥有的 jQuery:

$(function() { 
  $("#left-col").addClass("wide80");
  $("#trigger a").click(function(){  
    $("#right-col").animate({width:'toggle'},350);
    $("#left-col").animate({width:'100%'},350); return false
   });
});

如果您能给我任何帮助，我将不胜感激。

谢谢。

Answer 1

你可以尝试这个——按照这些思路应该可以工作

$(function() { 
    $("#left-col").addClass("wide80");
    $("#trigger a").click(function(){
        var leftCol = $("#left-col");

        if( leftCol.data('expanded') ) {
            leftCol.animate({width:'50%'},350);
            leftCol.data( 'expanded', false );
        } else {
            leftCol.animate({width:'100%'},350);
            leftCol.data( 'expanded', true );
        }

        $("#right-col").animate({width:'toggle'},350);

        return false;
    });
});