jquery - 切换布局页面跳转(脚本改进)

Question

我正在使用此脚本来切换页面中的布局:

$("span.switcher").click(function () {
    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
});

脚本工作正常，我遇到的问题是，如果切换 View 在页面下方，布局会发生变化，然后页面会跳回来。

如果我在您看到/* 的地方添加“return false”! */在第二行中，脚本不起作用。

此外，正如您所看到的，我使用 而不是 ，因为我被告知使用 之外的其他元素会阻止页面跳转。

知道如何解决页面跳转问题吗？

谢谢。

Answer 1

如this博客文章提到，页面向上滚动是因为

fadeOut sets the css property display to none.

博客中也给出了解决方案，即使用 fadeTo() 而不是 fadeOut() 和 fadeIn()，像这样:

$("span.switcher").click(
    function () {
        $("span.switcher").toggleClass("swap");
        $("ol.search-results").fadeTo("fast", 0,
            function () {
                $(this).fadeTo("fast", 1).toggleClass("grid");
            }
        );
    }
);

<小时/> 关于使用 a 元素而不是 span，您可以采取多种措施来防止链接的默认行为(如果链接的默认行为是跳转到页面顶部) href 属性为 "#")。 this 中讨论了如何做到这一点及其效果。所以问题。