3

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

干杯。

4

4 回答 4

4

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();
});
于 2013-01-27T20:22:17.577 回答
3

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

于 2013-01-27T20:22:31.767 回答
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();
});
于 2013-01-27T20:24:46.397 回答
2

一个很好的 tutsplus视频教程，正是您所需要的。这是一个简单的 jQuery。

于 2013-01-27T20:36:35.057 回答