1



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

如您所见，它是一个面板，在打开时以“自上而下”的方向推送“正文”的内容。
我想知道是否可以更改其代码以使滑动（侧）面板具有“左右”或“左右”方向，从而在打开时推动“正文”内容？

提前致谢

4

2 回答 2

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将不会被定义，所以不会 ( !=) 为真。然后我们可以在 500 毫秒内将宽度动画（api.jquery.com/animate/）到所需的大小，并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);
});
于 2013-05-20T22:29:21.010 回答
1

不确定您将如何使用动态驱动器执行此操作，但您可以使用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;
});

工作演示

于 2013-05-20T23:32:59.113 回答