隐藏固定页脚？

Posted 2023-03-21

【中文标题】隐藏固定页脚？

【英文标题】：Hide a fixed footer?

【发布时间】：2013-01-11 04:29:48

【问题描述】：

您好，我想知道有没有办法用按钮隐藏固定页脚，这样如果用户想查看更多屏幕内容，可以将其关闭，反之亦然。有没有办法用 css 做到这一点，还是需要 javascript？

干杯。

【参考方案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();
);

【讨论】：

您可能想要切换。

@BramVanroy 我更新了答案以允许在所有情况下隐藏/显示。

您可以只使用.toggle() 而不是 if 语句。：$("myFooter").toggle();

谢谢，非常感谢。 :)

@LukeJonGibson 不客气！

【参考方案2】：

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

【参考方案3】：

这是一个仅限 javascript 的版本，按钮的 ID 为“按钮”，页脚 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();
);

【参考方案4】：

一个不错的 tutsplus video tutorial 正是您所需要的。这是一个简单的 jQuery。

【讨论】：

谢谢，我一定会看视频的。