내 웹 사이트에 멋진 기능을 구현하고 싶습니다. 내 웹 사이트에 멋진 배경 이미지가 있고 그 위에 HTML 구성 요소가 있습니다. 사용자가 링크를 클릭하면 모든 HTML 요소가 사라지고 사용자가 전체 이미지를 볼 수 있도록 링크를 배경 이미지의 어딘가에 배치하려고합니다. 이 기능은 토글 할 수 있습니다. 누구든지 jQuery를 사용하여 이것을 어떻게 달성 할 수 있을지 제안 해 줄 수 있습니까?모든 HTML 구성 요소가 사라지고 배경 이미지 만 표시됩니다.
이 방법의 장점은 요소에 diplay 스타일을 설정하여 레이아웃을 망칠 가능성이 없으며 내용을 표시 할 때 남아 있어야하는 내용이 표시되지 않습니다. 숨겨진.
당신은 아주 쉽게 모든 것을 숨길 수 :
$('body > *').hide();
를 그 또한 토글 링크를 숨길 수 있습니다 만. 아마도 div와 같이 컨테이너에 숨겨진 요소를 모두두고 가시성을 토글하고 싶을 것입니다.
고맙습니다. :). – rookieRailer
은 당신이 뭔가를 할 수 있습니다 :
$('.show_bg').click(function() {
$('body > *').toggle();
$(this).show();
return false;
});
jsFiddle Example합니다.
@rookieRailer 문제가 없으면 정답을 수락하여 질문을 닫아야합니다. –
이 기능을 토글하는 데 사용하는 버튼을 제외하고 래퍼 div 내에서 토글하려는 모든 요소를 래핑해야합니다.
$(function(){
$('#hidelink').click(function(e){
e.preventDefault();
$('body').addClass('hideall');
});
$('body')click(function(){
$('body').removeClass('hideall');
});
});
.hideall * { display: none; }
지금 당신이 모든 것을 숨기기 위해 몸에 클래스를 추가하고 클래스를 제거 할 수 있습니다
<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 요소를 사라지게 할 수 있습니다. – rookieRailer
@rookieRailer : 콘텐츠가 애니메이션을 적용 할 수있는 요소에 있어야합니다. 기본적으로'class = "hidecontainer"'같은 것을 페이지의 컨테이너에 넣으면'$ ('. hidecontainer') .fadeOut()'와'$ ('. hidecontainer')와 같은 애니메이션을 사용할 수 있습니다. fadeIn()'을 숨기고 표시합니다. – Guffa
고마워. CSS를 계층 적으로 잘 디자인 했으므로이를 쉽게 채택 할 수 있어야합니다. 감사. – rookieRailer