1

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

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

该脚本工作正常，我遇到的问题是，如果切换视图位于页面下方，则布局会更改，然后页面会跳回。

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

另外，如您所见，我使用 <span> 而不是 <a>，因为有人告诉我使用 <a> 以外的其他元素会阻止页面跳转。

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

谢谢。

4

2 回答 2

2

您需要在函数调用中引用该事件并对其进行 stopPropagation ：

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

    event.stopPropagation();

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

});

这会阻止点击被通知到除此绑定之外的任何内容。

于 2010-05-19T22:23:18.320 回答
2

正如这篇博客文章所提到的，页面向上滚动是因为

fadeOut 将 css 属性 display 设置为 none。

博客中也给出了解决方案，将使用fadeTo()代替fadeOut()and 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属性为，则跳转到页面顶部"#"）。在这个SO question中讨论了如何做到这一点及其影响。

于 2010-05-19T22:31:26.600 回答