Question

我正在尝试做一个基本的div布局，并希望使用普通的javascript或jquery来模仿这个页面上的功能 http://octopress.org/blog/archives/

有一个内容包装器div和一个左侧文章列和一个右侧边栏列。在左右div之间还有一个可以点击的瘦小的div，一旦点击，它就会关闭或扩展右侧div。

页面流程......

1）在页面加载时，右侧div应该打开。

2）单击中间div后，它会关闭右侧div并展开左侧div的宽度以覆盖左侧+右侧div的空间。中间div仍然是可见的，因此您可以再次单击它以展开div退出

3）此外，一旦你单击中间div来折叠右侧div，它就会折叠它，但它也会放置该div的内容，而不是左侧主列div。就像右边的div我认为有一个浮点数：左边的valuse所以一旦左边的div扩展，它会将该div推到左边的div下面

4）右侧div折叠后，你可以点击现在拥抱主div包装器右侧边框的中间div，然后将左侧div重新向下缩小以允许右侧div重新装入再来一次

它可能听起来更复杂，然后描述我想要做的事情，如果您通过http://octopress.org/blog/archives/查看链接，它正是我正在谈论的内容。

我已经尝试过对页面进行处理并重建我正在运行的部分而没有任何运气，我真的很感激使用jquery执行此操作时的任何帮助，以及如何为div执行css。

我见过一些做类似工作的插件但不一样，如果可以的话请帮忙

以下是我追踪的不同阶段的一些屏幕截图......

enter image description here

我似乎只需要在点击中间div时添加javascript并删除一些css规则。

Answer 1

布局的关键是在侧边栏上使用否定margin。

您可以在此处看到简化的布局示例：

http://jsfiddle.net/9FUQA/

html

<div id="wrapper">
  <div id="content">
    <div class="left_column"></div>
    <div class="right_column"></div>
    <span class="toggle_sidebar"></span>
  </div>
</div>

CSS。首先浮动两列，然后设置右列的宽度和 100％nagetive margin-right ，将右列放在与左列相同的行上。

崩溃时，你会删除右栏上的浮点和右边距，并且它会落入正常的块流中。

#content {
  width:500px;
  margin-right:200px;
  position:relative;
}

.left_column {
  width:100%;
  float:left;

}

.right_column {
  width:160px;
  padding:0 20px;
  margin:0 -100% 0 0;
  float:left;
}

.toggle_sidebar {
  position:absolute;
  top:0;
  bottom:0;
  right:-10px;

}

.collapse .right_column {
  float: none;
  width: auto;
  clear: left;
  margin: 0;
}

.collapse #content {
  margin-right:20px;
}
.collapse .toggle_sidebar {
  right: -20px;
  width: 19px;
}

JS

$(document).ready(function () {
  $('.toggle_sidebar').click(function(event) {
      $('#wrapper').toggleClass('collapse');
  });
});

您可以在此处看到简化的布局示例：

http://jsfiddle.net/9FUQA/

Answer 2

加载jQuery 1.7 ...

$('#left-div').click(function () {
    $('left-div').animate({
        width: 99%,
    }, 5000, function() {
    });
});

$('#right-div').click(function () {
    $('right-div').animate({
        width: 400px,
    }, 5000, function() {
    });
});

这样的事情。可能必须为你的css调整它。

如何单击一个div并让它更改其他div的尺寸，然后再次单击后再更改

2 个答案: