javascript滑动(侧)面板

Question

下面是动态驱动的一个不错的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

如您所见，它是一个面板，在打开时以“自上而下”的方向推送“正文”的内容。
我想知道是否可以更改它的代码以便有一个带有“右-左”或“左-右”方向的滑动(侧面)面板，它在打开时插入“正文”内容？

提前致谢

Answer 1

我不建议使用该插件来实现你想要实现的目标——如果我理解正确的话，你想要的效果可以自己合理地构建，只需使用 jQuery 和 CSS 中的绝对定位即可。

<div class="container">
  <a href="#2" class="toggle">toggle</a>
  <div class="hidden">
  </div>
  <div class="body">
  </div>
</div>


.container {position:relative; } 

相对位置意味着包含的元素将以此为引用

.hidden {
  width:50px; 
  height:300px; 
  background:pink;
  position:absolute; 
  left:0;z-index:10;
} 

然后将此元素绝对定位在我们引用元素左侧的 0 处，并使用 z-index 以确保它在扩展时出现在 body 元素上方。

.body {width:500px; height:300px; background:grey; float:left;}

最后，您需要在您的页面中包含 jQuery 并使用类似于以下函数的内容。

$('.toggle').click(function(){
    if (open != true){
         $(".hidden").animate({width:'300px'}, 500);
         open = true;
    }
    else
    { 
         $(".hidden").animate({width:'50px'}, 500);
         open = false;
    }
    return false;
});

这将选择您的 a.toggle 元素，并在其上设置点击事件。第一次触发时 open 不会被定义，所以 (!=) 不会为真。然后我们可以将 (api.jquery.com/animate/) 宽度设置为超过 500 毫秒的所需大小，并在此函数范围内声明我们的 open 变量为真。下次我们触发此特定函数的点击事件时，} else { 之后的第二部分将改为触发。

您可以在 http://jsfiddle.net/DcWS2/ 上尝试演示.如果这不是您想要的，那么我很乐意进一步提供帮助。

编辑

您问题的更完整解决方案可能类似于 ( http://jsfiddle.net/DcWS2/3/)

$('.hidden').hover(function(){
    $(".hidden").stop().animate({width:'200px'}, 500);
    $(".body").stop().animate({marginLeft:'200px'}, 500);
},function(){ 
    $(".hidden").stop().animate({width:'30px'}, 500);
    $(".body").stop().animate({marginLeft:'30px'}, 500);
});