Question

尝试将带有Google表格图表的页面加载为隐藏状态，并仅在单击按钮后显示该页面。

如果我以table未隐藏的方式启动页面，我可以切换它，但是如果我从隐藏的表开始那是不可能的。

交换注释行以查看它：

$("table").addClass( 'table-bordered table-condensed table-striped');
// $("table").addClass( 'table-bordered table-condensed table-striped hidden');

Answer 1

使用 CSS 通过将display设置为none来隐藏表格。

#table {display:none;}

然后使用jQuery .css将其display转回block，当#show点击它时。

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
        $("#table").css('display', 'none');
    });
    $("#show").click(function(){
        $("p").show();
        $("#table").css('display', 'block');
    });
});

查看更新的fiddle。

Answer 2

使用此代码更改您的代码

$(document).ready(function(){
    $("p").hide();
        $("#table").hide();
    $("#hide").click(function(){
        $("p").hide();
        $("#table").hide();
    });
    $("#show").click(function(){
        $("p").show();
        $("#table").show();
    });
});

Answer 3

您可以在单击“显示”按钮时删除隐藏的类：

$("table").removeClass('hidden');

（并在点击隐藏时重新申请）。

按钮点击可见Google表格图表

3 个答案: