使所有的HTML组件消失，只显示背景图片

我想在我的网站中实现一个奇特的功能。我在我的网站上有一个很好的背景图片，在它的顶部有HTML组件。我想在背景图片中的某处放置一个链接，以便当用户单击该链接时，所有HTML元素消失，并且用户可以查看完整图像。此功能可以切换。任何人都可以告诉我，我可以如何实现这与jQuery？使所有的HTML组件消失，只显示背景图片

来源

2011-08-12 rookieRailer

让隐藏所有子元素的CSS类：

.hideall * { display: none; }

现在你可以添加类的身体隐藏的一切，并删除类显示再次一切：

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

这种方法的优点是它不会通过在元素上设置diplay样式来隐藏布局，并且在显示内容时它不会使应该保留的内容可见隐藏。

来源

2011-08-12 21:11:02 Guffa

非常感谢。我可以使它变得有点花哨，并使我的HTML元素以某种特定的方式消失，如淡入淡出或散开等。 – rookieRailer

@rookieRailer：要求内容位于可应用动画的元素中。基本上你会在页面上的容器中放入'class =“hidecontainer”''，然后你可以像'$（'。hidecontainer'）。fadeOut（）'和'$（'。hidecontainer'）一样使用动画。 fadeIn（）'隐藏并显示它们。 – Guffa

非常感谢。我应该能够很容易地采用这一点，因为我的CSS设计得非常好，并且采用了分层的方式。谢谢。 – rookieRailer

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

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

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

来源

2011-08-12 21:00:25 coreyward

非常感谢:)。 – rookieRailer

你可以做这样的事情：

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

jsFiddle Example。

来源

2011-08-12 21:00:30

@rookieRailer没问题，请务必接受正确答案以解决问题。 –

除了用于切换此功能的按钮外，您需要将所有要切换到包装器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>

来源

2011-08-12 21:03:22

为什么用'

任何一个都可以工作，但在这种情况下，是的，id可能在语义上是正确的。我经常在表单中使用

非常感谢:)。 – rookieRailer

使所有的HTML组件消失，只显示背景图片

回答

相关问题