jQuery ve CSS - Görüntüyü kaldır / ekle: yok

Bu sınıfta bir div var:

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

Ve bazı jQuery yöntemlerinin bu görüntüyü kaldırmasını istiyorum: yok; (böylelikle div gösterilecek) ve sonra tekrar ekleyeceğiz (böylece div gölgelenecektir).

Nasıl yapabilirim? Şerefe

Gizlemek için div

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

veya

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

ve şunu göstermek için div:

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

veya

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

jQuery size şunları sağlar:

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

Daha sonra öğeleri kolayca gösterebilir ve gizleyebilirsiniz.

Öyleyse size örnek kod vereyim:

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

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

Bağlantı, tıklandığında div'i gösteren tetikleyici olacaktır. Yani Javascript'iniz şöyle olacaktır:

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

Öğeleri gizlemek ve göstermek için jQuery'nin stili yönetmesine izin vermeniz neredeyse her zaman daha iyidir.

Düzenleme: Yukarıdaki kişilerin .showve bunun .hideiçin kullanılmasını tavsiye ettiğini görüyorum . .toggletek bir efektle her ikisini de yapmanızı sağlar. Yani bu harika.

JavaScript'te:

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

JQuery'de:

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

Göstermek ve gizlemek için geçişi kullanın.

$('#mydiv').toggle()

Http://jsfiddle.net/jNqTa/ adresindeki çalışma örneğini kontrol edin

öğeleri görüntülemek / gizlemek için bir sınıf eklemenizi öneririm:

.hide { display:none; }

ve sonra öğeyi göstermek / gizlemek için jquery'nin .toggleClass () öğesini kullanın:

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

JQuery'nin css-api'si aracılığıyla satır içi bir "display: none" kaldırmanın tek yolu, onu boş dizeyle sıfırlamaktır (null btw çalışmaz !!).

JQuery belgesine göre bu, önceden ayarlanmış bir satır içi stil özelliğini "kaldırmanın" genel yoludur.

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

veya

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

doğru düzgün yapmalı.

IMHO jQuery'de "gösterme" veya "gösterme" olarak adlandırılabilen ve yalnızca başka bir satır içi stil özelliğini ayarlamak yerine görüntü değerini yukarıda açıklandığı gibi düzgün bir şekilde kaldıran bir yöntem eksiktir. Veya belki hide()ilk satır içi değeri saklamalı ve show()bunu geri yüklemeli ...

jQuery'nin .show () ve .hide () işlevleri muhtemelen en iyi seçeneğinizdir.

Bize fazla bilgi vermiyorsunuz ama genel olarak bu bir çözüm olabilir:

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

Bazı nedenlerden dolayı, geçiş benim için işe yaramadı uncaught type error toggle is not a functionve öğeyi tarayıcıda incelerken hata aldım . Bu yüzden aşağıdaki kodu kullandım ve benim için çalışmaya başladı.

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

Jquery komut dosyası kullanıldı jquery-2.1.3.min.js.

İstediğiniz çok sayıda öğeniz varsa .hide()veya .show()istediğiniz şeyi yapmak için çok fazla kaynak harcarsınız - .hide(0)veya kullansanız bile .show(0)- 0 parametresi animasyonun süresidir.

Prototype.js .hide() ve .show()yalnızca öğenin görüntü özniteliğini değiştirmek için kullanılan yöntemlerin aksine , jQuery'nin uygulaması daha karmaşıktır ve çok sayıda öğe için önerilmez.

Bu durumlarda muhtemelen .css('display','none')saklamaya ve .css('display','')göstermeye çalışmalısınız

.css('display','block') özellikle satır içi öğeler, tablo satırları (aslında herhangi bir tablo öğesi) vb. ile çalışıyorsanız kaçınılmalıdır.

Lolesque'in yorumunu en iyi cevap olarak düşünerek, normalde sahip olandan farklı görüntüleme özelliklerine sahip öğeleri göstermek / gizlemek için bir öznitelik veya bir sınıf ekleyebilirsiniz, sitenizin geriye dönük uyumluluğa ihtiyacı varsa, göstermek için bir sınıf oluşturmanızı ve eklemeyi / kaldırmanızı öneririm. / öğeyi göster

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

.news-hide {
display:none;
}

Seçtiğiniz tercih ekran yöntemi ve kullanma jquerys addClass ile inline-block değiştirin https://api.jquery.com/addclass/ ve removeClass https://api.jquery.com/removeclass/ yerine göstermek / derisi, eğer geriye uyumluluk sorun değil, bunun gibi öznitelikleri kullanabilirsiniz.

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

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

Ve öğeyi göstermek ve gizlemek için jquerys attr () http://api.jquery.com/attr/ öğesini kullanın.

Hangi yöntemi tercih ederseniz edin, öğeleri bu şekilde gösterirken / gizlerken css3 animasyonlarını kolayca uygulamanızı sağlar

Bunun yerine bir şeyleri bozabilecek show()eklentiler kullanmak .display:blockdisplay:hide

Bundan kaçınmak için, özelliği olan bir sınıfa sahip olabilir display:noneve bu öğe için bu sınıfı açıp kapatabilirsiniz 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>

Cevapların hiçbiri bundan bahsetmedi.