崩溃后的 JavaScript 屏幕位置

Question

我试过用javascript隐藏div标签，但是当它折叠时，如何在屏幕位置显示准确的下潜？

Javascript , css 和 HTML 如下

  // Hide all the elements in the DOM that have a class of "box"
    $('.box').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function () {
        $(this).show(0).on('click', function (e) {
            // This is only needed if your using an anchor to target the "box"   elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').slideToggle('fast');
        });
    });

    $("#submit").click(function (e) {
        e.preventDefault();
        $("#box1").slideToggle('fast');
        $("#box2").slideToggle('fast');
    });

body {
    font: 12px/16px sans-serif;
    margin: 10px;
    padding: 0;
    }

     .clickme {
    background-color: #eee;
    border-radius: 4px;
    color: #666;
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-decoration: none;}

    }

    .clickme:hover {
    text-decoration: underline;
    }

    .box {
    background-color: #ccc;
    border-radius: 4px;
    color: #333;
    margin: 5px 0;
    padding: 5px 10px;
    width: auto;
    }

<a href="#" class="clickme">Menu 1</a>
    <span><span class="labelText"><span></span>Number 1</span>
    </span>
    <input type="text" value="" maxlength="50">
    <br/>
    <span><span class="labelText"><span></span>Number 2</span>
    </span>
    <input type="text" class="inputclmsize1" value="" maxlength="50" aria-invalid="false">
    <br>
    <a id="submit" href="#">Submit</a>
    </div>
    <a href="#" class="clickme">Menu 2</a>
    <div id="box2" class="box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
    </div>

我将其添加到带有更多文本数据的 jsfiddle 中。我想要的是，在我单击菜单 1 之后，提交链接结束。当我点击菜单 1 中的提交链接时，菜单 2 自动打开。但它无法以正确的屏幕位置打开。我想在屏幕开始位置显示菜单 2。那么如何定位呢？感谢您。你可以查看这个。

http://jsfiddle.net/rn4qdyue/14/

Answer 1

您可以使用 parent 的 scrollTop 并将其定位在您想要位于顶部的元素的顶部位置。如果您希望它非常精确，则必须考虑其他值，例如父级偏移量和边距。您可以在 slide 动画之后调用它。像这样:

       $(this).next('.box').slideToggle('fast', function () {
            $(this).parent().animate({
                scrollTop: $(this).position().top - $(this).parent().offset().top - 15
            })
        })

参见 fiddle :http://jsfiddle.net/k5o3bL69/1/