Question

我在可滚动div中包含数据行，如果用户单击每行中包含的DIV 1，则用户可以展开一行以显示更多信息。然后使用jquery显示/切换包含更多信息的DIV 2。

所以我的设计看起来像这样：

|- - - - - - - 
|Row 1
|Row 2
|Row 3
|Row 4
|etc..
 - - - - - - - - -

我的行周围的隔离线是我的可滚动div容器。

当用户点击Div 1时，会显示Div2

|- - - - - - - - - - - -
| Row 1
|Div 2 (Now Showing)
|Row 2
|Row 3
|Row 4
 - - - - - - - - - - -

正如您在此示例中所看到的，我的可滚动容器位于顶部，因此当用户单击第1行中的div 1时，div 2在此实例中处于视图中。但是，如果用户然后单击行中包含的DIV 1然后，如图4所示，其将在行4下方显示div 2，而用户不必手动向下滚动它们不能看到DIV 2，因为它显示在可滚动容器之外。

用户必须手动向下滚动，这可能会耗尽，具体取决于他们点击的行。

所以我的问题是，如何让我的DIV2始终滚动到用户的视图？

所以实际上我们会有：

|- - - - - - - - - - - -
| Row 1                    <--- User does not scroll the outer container
|Div 2 (Now Showing)            up or down.          
|Row 2                              |
|Row 3                       < - - -|
|Row 4  <---- User clicks on DIV 1 within Row 4 without scrolling. 
 - - - - - - - - - - -

则...

|- - - - - - - - - - - -
|Row 4                  <--- Without the user needing to scroll the 
|Div 2  (Now Showing)        outer container.          
|Row 5    /\                          |
|Row 6    |                    < - - -|
|Row 7    |--- Div 2 automatically scrolls into view. 
     - - - - - - - - - - -

我是jquery的新手，所以如果有人能告诉我哪里出错我会很感激，感谢提前。

<script>

$(".details").click(function()
{
    $(this).parent().next('.request_details').toggle();

});

</script>

<script>
    $(".request_details").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#search_results').offset().top 
    }, 2000);
});
</script>

鼠标单击时显示div并在可滚动容器中滚动div进入视图？

0 个答案: