不和谐的切换效果

Question

我有一个固定高度的 div，如下所示。 2 个问题。

1 - 当我点击 'on_click"show_hidden_​​div' 时，它确实显示了 div，但由于父 div 的高度是固定的，我只得到一个滚动条，现在用户必须向下滚动，当隐藏的 div 是否显示？

2 - 当隐藏的 div 再次隐藏时（通过单击链接），似乎整个 'fixed_height' 有点不和谐，而 div 被隐藏了。如何让这个顺利？

我显然在使用 jquery，这个固定高度的 div 在 jquery 工具覆盖 div 内，基本上这是一个模态对话框。

这里是javascript

$('#on_click_show_hidden_div').live('click', function() {
        $('#on_click_show_hidden_div').toggle('slow');
        return false;
    });

  <div id='fixed_height>

    <div id='form-wrapper'>
    <!-- form and form element -->
    <form id='post_form'>
    <a id='on_click_show_hidden_div'></a>
    <div id='hidden_div_with_more_form_elements'></div>
    <input id='submit'/>
    </form>
    </div>

</div>

Answer 1

首先，我假设在您的点击事件中，您打算切换hidden_div_with_more_form_elements，而不是链接本身。

其次，如果您合理地格式化您的 html（即双引号）会有所帮助

第三，如果您提供一些基本的 CSS 来显示示例 html 的实际问题，将会很有帮助。

最后，这里接近你想要的：

$('#on_click_show_hidden_div').click(function() {
  $('#hidden_div_with_more_form_elements').toggle('slow', function(){
     var pos = $('#hidden_div_with_more_form_elements').position().top;
     $('#fixed_height').scrollTop(pos);
  });

  return false;
});

这是一个活生生的例子：http://jsfiddle.net/ryleyb/ewehW/

本质上，jQuery 的 scrollTop 提供了您想要做的事情，我在切换动画的回调中使用它（即，一旦成功动画，滚动到它）。