我一直在深入研究更高级的 CSS 和 JQuery 以构建特定的布局，但卡在某些东西上 - 我不知道我是否遗漏了一些非常明显的东西，或者这是否需要更复杂的脚本来实现。我已经搜索了好几天，但似乎无法找到一个 Jquery 和 CSS 示例，它甚至足以让我调整和调整。很容易找到单个滑动面板演示，但没有任何东西可以容纳两个或三个重叠面板，并且还可以展示如何将主要内容放置在移动面板旁边。
我试图让三个面板从窗口的左侧滑入/滑出，使用面板本身上的 handle (就像我在文本字段底部的垂直版本的 handle )用于发布此问题)。面板也需要足够智能以允许同时打开任何/所有面板(并且仍然在每个面板的右边缘保留 15px 的部分，以便用户始终可以单击任何面板的任何 handle )。最后，随着任何/所有面板移入或移出，主要内容 block 需要自动调整其宽度。如果我刷新浏览器窗口，面板可以设置一个 cookie 来记住它们的最后位置，那就更好了。
JQuery 需要知道每个面板的打开/关闭状态，以及每个面板的位置 - 这可能会有所不同，具体取决于在当前选定面板之前和之后是否打开或关闭任何其他面板。例如，第三个面板可能位于四个不同位置之一，具体取决于第一和第二个面板是伸出还是缩回。
详情:
(A.) 主窗口包含所有内容并隐藏所有溢出，高度和宽度为 100%/流体。 (B.) 该窗口有一个标题栏，其中包含一些内容和控件。假设高度为 50 像素，宽度为 100%。 (C.) 右下方的主要内容区域包含将根据需要(垂直)滚动的内容。 (D.) 在左侧，我需要能够独立地在三个面板中滑动，让用户可以同时看到任何/所有面板，或者在不需要时收回它们。面板在标题栏和窗口底部之间有 200px 宽和 100% 垂直，当面板缩回时仍显示其右侧约 15px，其中包含一个垂直对齐的 handle (图像)，用户可以单击它来制作每个面板面板移入或移出(取决于当前状态)。 (E.) 当每个面板打开或关闭时，主要内容空间宽度应自动调整。
我已链接到下面的三个引用屏幕截图，这可能会更好地解释这一点。如有任何帮助，我们将不胜感激 - 在此先感谢您。
最佳答案
我同意上面的观点，你应该自己试一试，但由于我心情很好，我让你开始使用滑动面板和右上角的一个非常简短的弹出窗口.这绝不是完整的，但应该给你一个良好的开端。一旦您进一步提出更具体的问题，请再次联系我们。 http://jsfiddle.net/TqNRg/1/ .您需要在 CSS 中尝试使用 overflow:scroll 来获得正确的滚动效果，并使用 jQuery 来显示/隐藏右上角的弹出窗口。
编辑:更新了 fiddle ...忘记保存一些更改。这个更接近完成。
关于Jquery/CSS，如何拥有和访问多个(左)面板，同时自动调整主要内容容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17156280/