Question

嗨我想知道是否有办法用按钮隐藏固定的页脚，因此如果用户希望看到更多屏幕，则可以关闭它，反之亦然。有没有办法用css做这个或者它需要javascript吗？

欢呼声。

Answer 1

<强>的JavaScript

<input type="button" id="myButton" onclick="HideFooter()" />

function HideFooter()
{
    var display = document.getElementById("myFooter").style.display;
    if(display=="none")
        document.getElementById("myFooter").style.display="block";
    else
        document.getElementById("myFooter").style.display="none";
}

<强> JQuery的

$("#myButton").click(function(){

    if($("#myFooter").is(":visible"))
        $("#myFooter").hide();
    else
        $("#myFooter").show();
});

如果你想要一些其他不错的效果

$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show

另一种方法，如 Bram Vanroy 建议：

$("#myButton").click(function(){

    $("#myFooter").toggle();
});

Answer 2

需要JavaScript。您的按钮单击事件处理程序需要将页脚的display属性更改为none。

Answer 3

这是一个仅限javascript的版本，按钮的ID为＆＃34;按钮＆＃34;并且＆＃34;页脚＆＃34;的页脚ID。如果用户想要再次查看页脚，此方法将允许您在隐藏页脚后再次显示页脚。

   var button = document.getElementById('button');

    button.onclick = function() {
        var div = document.getElementById('footer');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

或者使用jQuery：

$("#button").click(function() { 
    $("#footer").toggle();
});

Answer 4

一个很好的tutsplus video tutorial，可以满足您的需求。这是一个简单的jQuery。

隐藏一个固定的页脚？

4 个答案: