jQuery 및 CSS-제거 / 추가 디스플레이 : 없음

이 클래스에 div가 있습니다.

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

그리고 일부 jQuery 메서드를 사용하여 해당 디스플레이를 제거하고 싶습니다. (그래서 div가 표시됩니다) 다시 추가하는 것보다 div가 음영 처리됩니다.

내가 어떻게 해? 건배

숨기려면 div

$('.news').hide();

또는

$('.news').css('display','none');

그리고 보여주기 위해 div :

$('.news').show();

또는

$('.news').css('display','block');

jQuery는 다음을 제공합니다.

$(".news").hide();
$(".news").show();

그런 다음 요소를 쉽게 표시하고 숨길 수 있습니다.

그래서 샘플 코드를 제공하겠습니다.

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

링크는 클릭시 div를 표시하는 트리거가됩니다. 따라서 Javascript는 다음과 같습니다.

$('.trigger').click(function() {
   $('.news').toggle();
});

거의 항상 jQuery가 요소를 숨기고 표시하는 스타일을 처리하도록하는 것이 좋습니다.

편집 : 위의 사람들 이 .show및 .hide이것을 사용하도록 권장하는 것을 봅니다 . .toggle하나의 효과로 두 가지를 모두 수행 할 수 있습니다. 그래서 멋지다.

JavaScript에서 :

getElementById("id").style.display = null;

jQuery에서 :

$("#id").css("display","");

표시하거나 숨기려면 토글을 사용하세요.

$('#mydiv').toggle()

http://jsfiddle.net/jNqTa/ 에서 작동 예를 확인하십시오.

요소를 표시 / 숨기기 위해 클래스를 추가하는 것이 좋습니다.

.hide { display:none; }

그런 다음 jquery의 .toggleClass () 를 사용 하여 요소를 표시하거나 숨 깁니다.

$(".news").toggleClass("hide");

jQuery의 css-api를 통해 인라인 "display : none"을 제거하는 유일한 방법은 빈 문자열로 재설정하는 것입니다 (null btw !! 작동하지 않음).

jQuery 문서에 따르면 이것은 한 번 설정된 인라인 스타일 속성을 "제거"하는 일반적인 방법입니다.

$("#mydiv").css("display","");

또는

$("#mydiv").css({display:""});

트릭을 제대로해야합니다.

IMHO에는 다른 인라인 스타일 속성을 설정하는 대신 위에서 설명한대로 표시 값을 적절하게 설정 해제하는 "숨기기 해제"또는 "공개"라고 할 수있는 jQuery에 누락 된 메서드가 있습니다. 또는 hide()초기 인라인 값을 저장하고 show()복원해야 할 수도 있습니다.

jQuery의 .show () 및 .hide () 함수가 아마도 최선의 방법 일 것입니다.

많은 정보를 제공하지는 않지만 일반적으로 이것이 해결책이 될 수 있습니다.

$("div.news").css("display", "block");

어떤 이유로 토글이 작동하지 않았고 uncaught type error toggle is not a function브라우저에서 요소를 검사 할 때 오류가 발생 했습니다. 그래서 나는 다음 코드를 사용했고 그것은 나를 위해 일하기 시작했습니다.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

사용 된 jquery 스크립트 파일 jquery-2.1.3.min.js.

.hide()또는 원하는 요소가 .show()많으면 원하는 작업을 수행하는 데 많은 리소스를 낭비하게됩니다 ( .hide(0)또는 사용하더라도 .show(0)0 매개 변수가 애니메이션의 지속 시간 임).

요소의 표시 속성을 조작하는 데만 사용되는 Prototype.js .hide() 및 .show()메소드 와 는 달리 jQuery 의 구현은 더 복잡하며 많은 요소에 권장되지 않습니다.

이 경우에는 .css('display','none')숨기고 .css('display','')보여 주어야 할 것입니다.

.css('display','block') 특히 인라인 요소, 테이블 행 (실제로는 테이블 요소) 등으로 작업하는 경우에는 피해야합니다.

최고의 답변에 대한 lolesque의 의견을 고려하면 일반적으로 가지고있는 것과 다른 표시 속성을 가진 요소를 표시 / 숨기기 위해 속성 또는 클래스를 추가 할 수 있습니다. 사이트가 하위 호환성이 필요한 경우 클래스를 만들고 표시하기 위해 추가 / 제거하는 것이 좋습니다. / 요소 표시

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

inline-block을 원하는 표시 방법으로 바꾸고 , 역방향 인 경우 show / hide 대신 jquerys addclass https://api.jquery.com/addclass/ 및 removeclass https://api.jquery.com/removeclass/를 사용 하십시오. 호환성은 문제가되지 않습니다. 이와 같은 속성을 사용할 수 있습니다.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

그리고 jquerys attr () http://api.jquery.com/attr/ 을 사용 하여 요소를 표시하고 숨 깁니다.

어떤 방법을 선호하든 이러한 방식으로 요소를 표시 / 숨길 때 css3 애니메이션을 쉽게 구현할 수 있습니다.

대신 show()추가 display:block를 사용하면 문제 가 display:hide발생할 수 있습니다.

이를 방지하기 위해 속성이있는 클래스를 갖고 display:none해당 요소에 대한 해당 클래스를 toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

이에 대해 언급 한 답변은 없습니다.