jquery - 隐藏具有可见性的元素(在本例中为按钮)

Question

想要隐藏一个按钮，同时保持按钮之间的空间。

$(document).ready(function(){
    $('#hide').click(function(){$('#btn').css('visibility','hidden');});
    $('#show').click(function(){$('#btn').css('visibility','visible');});
}    

查找可见性 CSS 标记。但似乎不是这样工作的(或者我可能弄错了 .css() 函数)。

JS fiddle Here

Answer 1

只需使用 jQuery 的 hide 和 show 为您设置可见性:

http://jsfiddle.net/uyoezedy/12/

$(function(){
    $('#hide').click(function(){$('#btn').hide();});
    $('#show').click(function(){$('#btn').show();});
});

在幕后 hide() 设置 display: none; 和 show() 设置 display: inline-block;

注意事项:

• $(function(){YOUR CODE HERE}); 是 $(document).ready(function(){...});
• 隐藏折叠元素占用的空间
• 您的原始版本不包含 jQuery(JSFiddle 左侧的选项)
• 您的 DOM 就绪处理程序未关闭(缺少 )；)

如果想使用visibility，让空间不塌陷，只需要修正语法错误即可:

http://jsfiddle.net/uyoezedy/13/

$(function(){
    $('#hide').click(function(){$('#btn').css('visibility','hidden');});
    $('#show').click(function(){$('#btn').css('visibility','visible');});
});