你好,我想知道是否有一种方法可以通过按钮隐藏固定页脚,这样用户就可以关闭它,从而查看更多的屏幕内容,反之亦然。这可以使用CSS实现还是需要JavaScript?
谢谢。
你好,我想知道是否有一种方法可以通过按钮隐藏固定页脚,这样用户就可以关闭它,从而查看更多的屏幕内容,反之亦然。这可以使用CSS实现还是需要JavaScript?
谢谢。
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();
});
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();
});
这需要使用 JavaScript
。您的按钮点击事件处理程序需要将页脚的 display
属性更改为 none
。
.toggle()
代替if语句。$("myFooter").toggle();
- Bram Vanroy