使所有HTML组件消失，仅显示背景图像

Question

我想在我的网站上实现一个奇特的功能。我有一个很好的背景图片在我的网站上，HTML组件在它上面。我想在背景图像中的某个地方放置一个链接，这样当用户单击该链接时，所有的HTML元素都会消失，并且用户可以查看完整的图像。此功能可以切换。有没有人能建议我如何使用jQuery来实现这一点？

Answer 1

创建一个隐藏所有子元素的CSS类：

.hideall * { display: none; }

现在，您可以将类添加到正文中以隐藏所有内容，并删除该类以再次显示所有内容：

$(function(){
  $('#hidelink').click(function(e){
    e.preventDefault();
    $('body').addClass('hideall');
  });
  $('body')click(function(){
    $('body').removeClass('hideall');
  });
});

这种方法的优点是，它不会因为在元素上设置diplay样式而潜在地扰乱布局，并且在显示内容时，它不会使本应隐藏的内容可见。

Answer 2

你可以很容易地隐藏一切：

$('body > *').hide();

虽然这也会隐藏你的切换链接。您可能希望将所有可隐藏的元素放在一个容器中(如div)，并在容器上切换可见性。

Answer 3

你可以这样做：

$('.show_bg').click(function() {
    $('body > *').toggle();
    $(this).show();
    return false;
});

。