隐藏固定页脚？

Question

你好，我想知道是否有一种方法可以通过按钮隐藏固定页脚，这样用户就可以关闭它，从而查看更多的屏幕内容，反之亦然。这可以使用CSS实现还是需要JavaScript？

谢谢。

- GibsonFX

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();
});

如果您想要其他漂亮的效果

请注意，此段文字包含HTML标签，已保留。

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

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

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

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

- Ali Bassam

---

你可能想将它制作成一个开关。 - Bram Vanroy

@BramVanroy 我更新了我的答案，允许在所有情况下进行隐藏/显示。 - Ali Bassam

你可以使用.toggle()代替if语句。$("myFooter").toggle(); - Bram Vanroy

Answer 2

这是一个仅使用JavaScript的版本，其中按钮的ID为 "button"，页脚的ID为 "footer"。 如果用户想再次查看页脚，则此方法将允许您再次显示页脚，即使它已被隐藏。

   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();
});

- Omega

Answer 3

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

- Konstantin Dinev

Answer 4

这里有一篇非常适合你需要的tutsplus 视频教程。它是一个简单的jQuery技术。

- bennett_an

---

谢谢，我一定会观看这个视频。 - GibsonFX