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;
}

然后将此元素绝对置于我们的引用元素左侧并使用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变量为真。下次我们在此特定函数上触发click事件时，} 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);
});

Answer 2

不确定如何使用动态云端硬盘完成此操作，但您可以使用jQuery show/hide轻松完成此操作：

<强> HTML：

<div id="helpPanel">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
<div class="normal">
    Maecenas ultrices feugiat nibh sit amet mattis. Nullam et sapien id turpis tempus tincidunt non ac sapien.
</div>

<强> CSS：

#helpPanel {  border: 1px solid red; overflow: auto; display: none; }
.normal { margin-top: 15px; border: 1px solid blue; }

<强> JavaScript的：

var state = true;
var $panel = $("#helpPanel");
$("#button").on("click" ,function() {
    if ( state ) {
        $panel.show(1000);
    } else {
        $panel.hide(1000);
    }
    state = !state;
});

Working Demo

javascript滑动（侧面）面板

2 个答案: