Question

我想创建一个用户必须输入soma数据的网站。为了使这个尽可能简单，我只显示主要的输入元素，并在需要时让帮助面板向下滑动。尽可能地，这些面板应该是可拖动的（我正在为此寻找javascript）。我的主要问题是，当面板向下滑动时，顶部的内容会首先显示，但我想向下滑动，如下所示：

slide-down1

slide-down2

slide-down3

有没有办法做到这一点？

提前致谢。

Answer 1

看看这个JSFiddle。

这应该表明达到这种效果的原则。你需要一个带有overflow: hidden;的容器div和一个放在容器div底部的子容器，然后你可以用jQuery改变容器的高度来显示/隐藏内容。

此外，为了使面板可拖动，jQuery UI具有一个很棒的功能draggable。试一试。

Answer 2

快速访问：小提琴：http://jsfiddle.net/VuPyL/1/（已更新），顺便说一句：我让它像切换一样。

一般情况下，它似乎只能通过动画来解决，如果你不想拥有任何包装元素，你真的想使用DOM的原生属性＆＃34; scrollHeight＆＃34; - 允许您始终滚动到底部，结合高度切换，它完全符合您的需要。

溢出：隐藏不必在CSS中 - jQuery在切换高度时自己添加它。

这个解决方案可能看起来有点长，但在实际发生的事情中更清楚:)：

HTML

<div id="helper-panel">
    Here's
    <br />
    My
    <br />
    Content    
</div>
<button id="show-helper">Show/hide Helper Panel</button>

CSS

#helper-panel{
   height: 70px;
   width: 375px;
   position: relative;
   overflow: hidden; /*optional - jQuery is adding it*/ 
   display: none;
}

JS / jQuery的

$('#show-helper').click(function(){
    var $helper = $('#helper-panel');
    $helper.animate({
        height: "toggle"
    },{
        duration: 800,
        progress: function(){
            $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

根据@Andrew Pope建议的项目可拖动/可放置，最好使用jQuery UI draggables＆amp; droppables。

如果您只想使用拖放功能更改辅助菜单项的顺序，请检查sortable。）

jQuery UI不是jQuery的标准部分 - 所以不要忘记包含它。
使用这些时，最好包裹每个可拖动元件。所以HTML将是：

<div id="helper-panel">
    <div>Here's</div>
    <div>My</div>
    <div>Content</div>    
</div>

jQuery（使用jQuery UI）：

$('#helper-panel').sortable() //make the items inside #helper-panel sortable
                  .disableSelection() //when sorting, you dont want selecting
                  .css('cursor','default'); //looks better with default cursor

jQuery - 向下滑动面板

2 个答案: