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

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

나는 이 클래스의 디브가 있습니다.

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

그리고 몇 가지 jQuery 방법을 사용하여 해당 디스플레이를 제거하고 싶습니다. 없음; (따라서 디브가 표시됨) 그리고 다시 추가하는 것보다 (따라서 디브가 그림자를 지움).

어떻게 하면 되죠?

을 div

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

아니면

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

를 위해 을 div:

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

아니면

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

jQuery는 다음을 제공합니다.

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

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

자바스크립트의 경우:

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

InjQuery:

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

샘플 코드를 알려드리겠습니다.

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

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

링크를 클릭하면 div가 표시되는 트리거가 됩니다.그래서 당신의 자바스크립트는 다음과 같습니다.

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

숨김과 보여주기 위한 스타일링을 jQuery에게 맡기는 것이 거의 항상 더 좋습니다.

편집: 위의 사용자들이 다음을 사용할 것을 권장합니다..show그리고..hide ㅜㅜㅜ.toggle단 하나의 효과로 두 가지를 모두 수행할 수 있습니다.멋지네요.

표시하고 숨기려면 토글을 사용합니다.

$('#mydiv').toggle()

http://jsfiddle.net/jNqTa/ 에서 작동 사례를 확인합니다.

를 통해 로 재설정하는 입니다(jQuery cs-api "display:none" "display:none" ").null그건 그렇고 작동하지 않습니다!!).

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

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

아니면

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

요령을 제대로 부려야 합니다.

IMHO에는 jQuery에 "숨김 해제" 또는 "공개"라고 할 수 있는 메서드가 누락되어 있습니다. 이 메서드는 다른 인라인 스타일 속성만 설정하는 대신 위에서 설명한 대로 디스플레이 값을 적절하게 설정 해제합니다.아니면 아마hide()는 초기 기을야다인 를 .show()회복시켜야 할...

요소를 표시/숨기기 위해 클래스를 추가할 것을 제안합니다.

.hide { display:none; }

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

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

많은 정보를 제공하지는 않지만 일반적으로 다음과 같은 방법이 있습니다.

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

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

어떤 이유에서인지 토글이 안되고 오류가 발생했습니다.uncaught type error toggle is not a function브라우저에서 때검사할 요소를 때 so i 검사할 and the working for 요소를 it used 브라우저에서 code me following started and <nat> <nat> 그래서 저는 다음 코드를 사용했고 그것이 저에게 효과가 있기 시작했습니다.

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

사용된 파일 된 jquery jquery-2.1.3.min.js.

만약 당신이 많은 요소를 가지고 있다면 당신은 하고 싶습니다..hide()아니면.show(), 사용하더라도 원하는 작업을 수행하기 위해 많은 자원을 낭비하게 됩니다..hide(0)아니면.show(0) - 0는의속다다속의는ee0f-sn0r

Prototype.js와 반대로 .hide()그리고..show()요소의 디스플레이 속성을 조작하는 데만 사용되는 메소드, jQuery의 구현은 더 복잡하며 많은 요소에 권장되지 않습니다.

이 경우에는 아마도 당신이 시도해봐야 할 것입니다..css('display','none')숨다.css('display','')보여줄

.css('display','block')인라인 요소, 테이블 행(모든 테이블 요소 포함) 등을 사용하는 경우에는 특히 피해야 합니다.

최상의 답변을 위한 롤레스크의 의견을 고려하여 속성이나 클래스를 추가하여 보통과 다른 표시 속성을 가진 요소를 표시/숨길 수 있습니다. 사이트에서 하위 호환성이 필요하다면 클래스를 만들고 요소를 표시/표시하기 위해 추가/제거하는 것을 제안합니다.

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

.news-hide {
display:none;
}

인라인 블록을 원하는 디스플레이 방법으로 대체하고 jquery addclass https://api.jquery.com/addclass/ 을 사용하고 show/hide 대신 class https://api.jquery.com/removeclass/ 을 제거합니다. 하위 호환성에 문제가 없다면 이와 같은 속성을 사용할 수 있습니다.

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

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

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

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

사용.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>

어떤 대답도 이것에 대해 언급하지 않았습니다.

다음은 JS를 사용하여 보여주고 숨기는 몇 가지 예시입니다.

http://jsfiddle.net/vsLkb8a7/8/

CSS:

<style>
.elem{
    width:300px;
    height:300px;   
}

.divClass1{
    background:red;
}
.divClass2{
    background:blue;
}
.divClass3{
    background:green;
}
.divClass4{
    background:orange;
}
.divClass5{
    background:black;
}
.divClass6{
    background:yellow;
}
.hidemeClass{
  display:none;
}

.showmeClass{
  display:block;
}
</style>

HTML:

<button class="myBtn">show and hide div</button>
<div id="" class="elem divClass1"></div>
<div id="" class="elem divClass2 showmeClass"></div>
<div id="divId" class="elem divClass3"></div>
<div id="" class="elem divClass4"></div>
<div id="" class="elem divClass5"></div>
<div id="" class="elem divClass6"></div>

jS:

jQuery(".myBtn").click(function () {

  //Simple toggle
  jQuery('.divClass1').toggle();
  

  //OR use a toggle between classes. Of course you would have to add: .hidemeClass{display:none;}.showmeClass{display:block;} to your stylesheet and the element should have atleast the default class.
  jQuery('.divClass2').toggleClass('hidemeClass showmeClass');



  //OR let's use a toggle with a case statement
  jQuery(this).toggleClass('hidediv');
  
  if (jQuery(this).hasClass('hidediv')){


    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:none;"; //display:unset or :initial


    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:none');
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','none');
    //display:unset or :initial


    //or using builtin hide()
    jQuery('.divClass6').hide();

  }else{

    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:block;"; //display:unset or :initial

    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:block'); 
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','block');
    //display:unset or :initial


    //or using builtin show()
    jQuery('.divClass6').show();

  }


});

언급URL : https://stackoverflow.com/questions/5059596/jquery-css-remove-add-displaynone