html中的最小化侧面板答案

【问题标题】：Minimizable side panel in htmlhtml中的最小化侧面板
【发布时间】：2011-07-29 20:45:20
【问题描述】：

我正在寻找一个简单的 javascript 来创建在某些操作后隐藏的侧面板（例如，在单击某个区域后）。像this example 这样的东西，但在示例工作时从左侧出现，而不是从上到下。将不胜感激任何帮助:)

【问题讨论】：

为什么不使用 jQuery。使用 jQuery 是一项简单的任务
我认为这是最流行的解决方案，但我想找到一些替代方案来选择最好的解决方案 :)

【解决方案1】：

您有 2 个选项。您可以使用 JQuery 或 scriptaculous 来执行此操作。互联网上有很多示例和教程，或者您可以简单地使用 java 脚本。先下载émile这是一个非常简单的javascript动画框架。

由于您没有提供任何 HTML 标记，我假设您有类似的东西。

<div id="side-panel">panel content..</div>
<div id="content">main content..</div>

假设您的侧面板元素的 CSS 样式为 width:200px。好的，现在在某处放置一个按钮并为其分配一个点击事件。如onclick="togglePanel()"

这里是togglePanel函数的内容：

function togglePanel(){
    var panel = document.getElementById('side-panel');
    if(!panel.__closed){
        emile(panel, 'width:0px');
        panel.__closed = true;
    }else{
        emile(panel, 'width:200px');
        panel.__closed = false;
    }
}

如果您查看 emile 框架的文档，您可以做很多其他很酷的事情。

【讨论】：

即使您将答案限制为“使用库”，也有两个以上的选择。
你为什么不用 Jquery 来做，它更容易。
我只是不喜欢为一个简单的动作添加一个完整的库。 emile 只有 50 行代码，可以做所有类型的动画。 JQuery 在这里似乎有点矫枉过正。此外，他可以非常轻松地将这个脚本转换为 jQuery。

【解决方案2】：

由于您尚未向我们提供您的代码（您已构建），这就是为什么我只是提供代码来帮助您（而且我不知道这是否是正确答案）。这段代码需要jQuery Ver.1.4 至少我认为是这样，但我不清楚。不管怎样，让我们开始吧。这是live demo的链接。

希望这会有所帮助！

【讨论】：

谢谢，这个例子看起来像我正在寻找的一个:)
嘿 Nozim，如果 Jack Billy 的回答是完美的，那你为什么不接受他的回答。