Question

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

在左栏内部，我有一个“触发器”来隐藏右栏，这使得左栏在隐藏右栏时展开100％。现在我能够让正确的列显示回来，但问题是右列包裹在左列下（当然，左列的宽度为100％），而不是像它最初开始时那样在它旁边。 / p>

我不是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;
    });
});

Answer 2

最后的工作代码，感谢Kerry：

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

    if( leftCol.data('expanded') ) {
        leftCol.animate({width:'60%'},350);
        leftCol.data( 'expanded', false );
        $("#right-col").toggle(350);
    } else {
        leftCol.animate({width:'100%'},350);
        leftCol.data( 'expanded', true );
        $("#right-col").hide();
    }
    return false;
  });
});

jQuery - 滑动垂直对齐的列

2 个答案: