bootstrap 中的面板滚动

Question

我有 bootstrap 代码如下

<div class="container">
   <div class="row ">
     <div class="col-md-3">
        <div class="panel panel-default">
           <div class="panel-heading">Title</div>
           <div class="panel-body">
                <div class="panel panel-default" id="fp">
                    <div class="panel-body">
                        First Panel
                    </div>
                </div>
                <div class="panel panel-default" id="sp">
                    <div class="panel-body">
                        Second Panel
                    </div>
                </div>
           </div>
       </div>
    </div>
<div class="col-md-3" id="movable-container">
    <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">
            <div class="panel panel-default">
                <div class="panel-body">
                        Movable Panel
                </div>
            </div>
        </div>
    </div>
</div>

我想要实现的是，当我点击带有 id 'sf' 或 'sp' 的面板时，然后带有 id 的面板 'movable-container' 必须与此面板水平对齐。

可以看到样本here

我想要实现的是当用户点击带有

的面板时

我试图做的是获取我单击的容器的位置并将 'mocable-container' x 像素向下移动，其中 x 是单击容器的返回位置。 jquery 的 animate() 函数也无法多次工作。

如何实现？

Answer 1

这就是你要找的吗？

$("#sp").on("click",function(e){
  var pos = $("#movable-container").position().top;
      $('#movable-container').animate({
            'top': $(this).position().top
       }, 1000);
});

$("#fp").on("click",function(e){
      $('#movable-container').animate({
            'top': $(this).position().top
       }, 1000);
});

Answer 2

为什么不对两者使用相同的函数：

$("#sp, #fp").on("click",function(e){
  var pos = $("#movable-container").position().top;
  $('#movable-container').animate({
    'top': $(this).position().top
  }, 1000);
});

BootplyDemo

bootstrap 中的面板滚动

Panel scrolling in bootstrap

html

javascript

css

jquery

twitter-bootstrap