jQuery 및 CSS-표시 제거 / 추가 : 없음

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단 하나의 효과로 두 가지를 모두 수행 할 수 있습니다. 그래서 멋지다.

---

자바 스크립트에서 :

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"을 제거하는 유일한 방법은 빈 문자열로 재설정하는 것입니다 ( nullbtw 작동하지 않습니다 !!).

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

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

또는

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

트릭을 올바르게 수행해야합니다.

IMHO there is a method missing in jQuery that could be called "unhide" or "reveal" which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide() should store the initial inline value and show() should restore that...

---

jQuery's .show() and .hide() functions are probably your best bet.

---

You're not giving us much information but in general this might be a solution:

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

---

For some reason, toggle didn't work me and received error:"uncaught typeerror toggle is not a function". on inspect element in browser. So i used the following code and it started working for me.

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

Used jquery script file with version: 'jquery-2.1.3.min.js".

---

If you have a lot of elements you would like to .hide() or .show(), you are going to waste a lot of resources to do what you want - even if use .hide(0) or .show(0) - the 0 parameter is the duration of the animation.

As opposed to Prototype.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery's implementation is more complex and not recommended for a large number of elements.

In this cases you should probably try .css('display','none') to hide and .css('display','') to show

.css('display','block') should be avoided, especially if you're working with inline elements, table rows (actually any table elements) etc.

---

Considering lolesque's comment to best answer you can add either an attribute or a class to show/hide elements with display properties that differs from what it normally has, if your site needs backwards compatibility I would suggest making a class and adding/removing it to show/display the element

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

.news-hide {
display:none;
}

Replace inline-block with your preferred display method of your choice and use jquerys addclass https://api.jquery.com/addclass/ and removeclass https://api.jquery.com/removeclass/ instead of show/hide, if backwards compatibility is no problem you can use attributes like this.

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

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

And use jquerys attr() http://api.jquery.com/attr/ to show and hide the element.

Whichever method you prefer it makes you able to easily implement css3 animations when showing/hiding elements this way

참고URL : https://stackoverflow.com/questions/5059596/jquery-css-remove-add-displaynone