javascript - jQuery DOM 접근 - jQuery에서 요소가 숨겨져 있는지 어떻게 확인합니까?

jQuery 접근 / javascript / jquery / dom / visibility

.hide() , .show() 또는 .toggle() 함수를 사용하여 요소의 가시성을 전환 할 수 있습니까?

Nicolas Gervais



Answer #1

opacity:0 은 요소를 "visibility : hidden"으로 숨기고 레이아웃에서 여전히 공간을 차지합니다. 유일한 차이점은 불투명도를 사용하면 요소를 부분적으로 투명하게 만들 수 있다는 것입니다.

opacity:0 은 요소를 "visibility : hidden"으로 숨기고 레이아웃에서 여전히 공간을 차지합니다. 유일한 차이점은 불투명도를 사용하면 요소를 부분적으로 투명하게 만들 수 있다는 것입니다.

if ($('.target').is(':hidden')) {
  $('.target').show();
} else {
  $('.target').hide();
}
if ($('.target').is(':visible')) {
  $('.target').hide();
} else {
  $('.target').show();
}

if ($('.target-visibility').css('visibility') == 'hidden') {
  $('.target-visibility').css({
    visibility: "visible",
    display: ""
  });
} else {
  $('.target-visibility').css({
    visibility: "hidden",
    display: ""
  });
}

if ($('.target-visibility').css('opacity') == "0") {
  $('.target-visibility').css({
    opacity: "1",
    display: ""
  });
} else {
  $('.target-visibility').css({
    opacity: "0",
    display: ""
  });
}

유용한 jQuery 토글 방법 :

$('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});