Question

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

Answer 1

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

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

虽然这也会隐藏你的切换链接。您可能希望将所有可隐藏的元素放在容器中（如div）并切换其可见性。

Answer 2

你可以这样做：

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

<强> jsFiddle Example

Answer 3

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

.hideall * { display: none; }

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

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

这种方法的优势在于它不会通过在元素上设置diplay样式来破坏布局，并且在显示内容时它不会使可见的东西保持隐藏。

Answer 4

除了用于切换此功能的按钮之外，您需要在包装器div中包装要切换的所有元素。

<body>
    <div id='wrapper'>sdfsdf
        <!-- All your content -->
    </div>
    <button name='toggle_bg'>Toggle background image</button>
</body>
<script>
$("button[name='toggle_bg']").click(function(){
    $("div#wrapper").toggle();
});
</script>

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

4 个答案: