Question

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

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

脚本运行正常，我遇到的问题是如果切换视图在页面下方，布局会发生变化，然后页面会重新启动。

如果我在你看到/ *的地方添加'return false'！ * /在第二行中，脚本不起作用。

此外，正如您所看到的，我正在使用＆lt; span＆gt;而不是＆lt; a＆gt;因为我被告知使用除＆lt;之外的其他元素a＆gt;会阻止页面跳跃。

知道如何修复页面的跳转吗？

感谢。

Answer 1

您需要在函数调用中引用事件并在其上引用stopPropagation：

$("span.switcher").click(function (event) {

    event.stopPropagation();

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

});

这会阻止点击通知此绑定以外的任何内容。

Answer 2

正如this博客文章提到的那样，页面会向上滚动，因为

fadeOut将css属性显示设置为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 SO问题中进行了讨论。

切换布局页面跳转（改进到脚本）

2 个答案: