javascript - 单击时样式切换器跳转到页面顶部

Question

我有样式切换器，使用 php 和 jquery 来实现它。现在，当我单击其按钮打开时，页面跳转到页面顶部。以及当我单击相同的按钮关闭样式框时。同样的情况会跳转到页面顶部。如何更改代码以使其在不跳转的情况下打开。

jQuery.fn.styleSwitcher = function(){
    $(this).click(function(){
        // We're passing this element object through to the
        // loadStyleSheet function.
        loadStyleSheet(this);
        // And then we're returning false.
        return false;
    });

    function loadStyleSheet(obj) {
        $.get( obj.href+'&js',function(data){

            // Select link element in HEAD of document (#stylesheet) and change href attribute:
            $('#stylesheet').attr('href','css/' + data + '.css');

            // Check if new CSS StyleSheet has loaded:

        });
    }
}

$(document).ready(function () {
    $(".toggleDiv .expand-arrow").show();
    $(".toggleDiv .shrink-arrow").hide();

    $(".toggleDiv .expand-arrow").click(function(){
        $("#style-switcher").animate(
        {"left": "0"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "1"}, "slow");

            $(".toggleDiv .expand-arrow").hide();
        $(".toggleDiv .shrink-arrow").show();
    }); 

    $(".toggleDiv .shrink-arrow").click(function(){
        $("#style-switcher").animate(
        {"left": "-200px"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "0"}, "slow");

        $(".toggleDiv .expand-arrow").show();
        $(".toggleDiv .shrink-arrow").hide();
    });  
});

Answer 1

您应该使用preventDefaultor禁用链接的行为return false：

$(document).ready(function () {
    $(".toggleDiv .expand-arrow").show();
    $(".toggleDiv .shrink-arrow").hide();

    $(".toggleDiv .expand-arrow").click(function(e){
        e.preventDefault(); // disable the link
        $("#style-switcher").animate(
        {"left": "0"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "1"}, "slow");

            $(".toggleDiv .expand-arrow").hide();
        $(".toggleDiv .shrink-arrow").show();
    }); 

    $(".toggleDiv .shrink-arrow").click(function(e){
        e.preventDefault(); // disable the link
        $("#style-switcher").animate(
        {"left": "-200px"}, "slow");

        $("#swatchesDiv").animate(
        {"opacity": "0"}, "slow");

        $(".toggleDiv .expand-arrow").show();
        $(".toggleDiv .shrink-arrow").hide();
    });  
});