jQuery & CSS - Usuń / Dodaj wyświetlacz: brak

Mam div z tą klasą:

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

Chciałbym, aby niektóre metody jQuery usunęły to wyświetlanie: none; (aby element div został wyświetlony), a następnie dodaj go ponownie (aby element div był widoczny).

Jak mogę to zrobić? Twoje zdrowie

Aby ukryć div

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

lub

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

i pokazać div:

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

lub

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

jQuery zapewnia:

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

Następnie możesz łatwo pokazać i ukryć element (y).

Pozwólcie, że podam wam przykładowy kod:

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

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

Link będzie wyzwalaczem pokazania elementu div po kliknięciu. Więc twój Javascript będzie:

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

Prawie zawsze lepiej pozwolić jQuery na stylizację ukrywania i pokazywania elementów.

Edycja: widzę, że osoby powyżej zalecają używanie .showi .hidedo tego. .togglepozwala na jedno i drugie za pomocą jednego efektu. Więc to jest fajne.

W JavaScript:

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

W jQuery:

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

Użyj przełącznika, aby pokazać i ukryć.

$('#mydiv').toggle()

Sprawdź działający przykład na http://jsfiddle.net/jNqTa/

sugerowałbym dodanie klasy do wyświetlania / ukrywania elementów:

.hide { display:none; }

a następnie użyj funkcji .toggleClass () jquery, aby pokazać / ukryć element:

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

Jedynym sposobem na usunięcie inline "display: none" poprzez css-api jQuery jest zresetowanie go za pomocą pustego ciągu (przy nullokazji NIE działa !!).

Zgodnie z dokumentacją jQuery jest to ogólny sposób na „usunięcie” raz ustawionej właściwości stylu wbudowanego.

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

lub

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

powinien poprawnie załatwić sprawę.

IMHO w jQuery brakuje metody, którą można by nazwać „odkryć” lub „ujawnić”, która zamiast po prostu ustawić inną właściwość stylu w wierszu, poprawnie ustawia wyświetlaną wartość, jak opisano powyżej. A może hide()powinien zapisać początkową wartość wbudowaną i show()przywrócić ją ...

Funkcje jQuery .show () i .hide () są prawdopodobnie najlepszym rozwiązaniem.

Nie podajesz nam zbyt wielu informacji, ale ogólnie może to być rozwiązanie:

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

Z jakiegoś powodu toggle nie działa dla mnie i otrzymałem błąd uncaught type error toggle is not a functionpodczas sprawdzania elementu w przeglądarce. Więc użyłem następującego kodu i zaczął dla mnie działać.

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

Używany plik skryptu jquery jquery-2.1.3.min.js.

Jeśli masz dużo elementów, które chcesz .hide()lub .show(), będziesz marnować dużo zasobów, aby robić to, co chcesz - nawet jeśli używasz .hide(0)lub .show(0)- parametr 0 to czas trwania animacji.

W przeciwieństwie do Prototype.js .hide() i .show()metod, które były używane tylko do manipulowania atrybutem wyświetlania elementu, implementacja jQuery jest bardziej złożona i nie jest zalecana dla dużej liczby elementów.

W takich przypadkach prawdopodobnie powinieneś spróbować .css('display','none')ukryć i.css('display','') pokazać

.css('display','block') należy unikać, zwłaszcza jeśli pracujesz z elementami wbudowanymi, wierszami tabeli (właściwie dowolnymi elementami tabeli) itp.

Biorąc pod uwagę komentarz Lolesque, aby uzyskać najlepszą odpowiedź, możesz dodać atrybut lub klasę, aby pokazać / ukryć elementy o właściwościach wyświetlania, które różnią się od tego, co normalnie ma, jeśli twoja witryna wymaga kompatybilności wstecznej, sugerowałbym utworzenie klasy i dodanie / usunięcie jej, aby pokazać / wyświetl element

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

.news-hide {
display:none;
}

Zastąp inline-block preferowaną metodą wyświetlania i użyj jquerys addclass https://api.jquery.com/addclass/ i removeclass https://api.jquery.com/removeclass/ zamiast show / hide, jeśli wstecz kompatybilność nie stanowi problemu, możesz używać takich atrybutów.

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

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

I użyj jquerys attr () http://api.jquery.com/attr/ aby pokazać i ukryć element.

Niezależnie od preferowanej metody, możesz łatwo implementować animacje css3 podczas pokazywania / ukrywania elementów w ten sposób

Używanie show()reklam display:blockw miejsce, display:hidektóre może zepsuć rzeczy.

Aby tego uniknąć, możesz mieć klasę z właściwością display:nonei przełączać tę klasę dla tego elementu za pomocą 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>

Żadna z odpowiedzi o tym nie wspomniała.