jQuery show () สำหรับ Twitter Bootstrap คลาส css ที่ซ่อนอยู่

ฉันใช้ Twitter Bootstrap และฉันสังเกตเห็นว่า jQuery show()หรือfadeIn()ไม่ทำให้องค์ประกอบ DOM ที่มีเครื่องหมายคลาสhiddenปรากฏขึ้นเนื่องจากฟังก์ชั่น jQuery ลบdisplay: noneข้อกำหนดเท่านั้น อย่างไรก็ตามยังคงมีการตั้งค่าให้visibilityhidden

ฉันสงสัยว่าวิธีใดเป็นวิธีที่ดีที่สุดในการแก้ไขปัญหานี้

1. ลบhiddenคลาสในองค์ประกอบ
2. เปลี่ยนคุณสมบัติการมองเห็น
3. เขียนทับคลาสที่ซ่อนอยู่ใน css ของฉันเอง

โดยเฉพาะอย่างยิ่งฉันต้องการทราบว่าการแก้ไขปัญหานี้ด้วย jQuery หรือ css นั้นดีกว่าหรือไม่และทำไม

.collapseซีเอสเอชั้นที่คุณกำลังมองหาอยู่ สิ่งนี้ตั้งค่าองค์ประกอบเป็นdisplay: none;

ดังนั้นการใช้$('#myelement').show()จะทำงานได้อย่างถูกต้อง

UPDATE: Bootstrap v3.3.6 ได้อัปเดต. ยุบกลับไปที่:

.collapse {
  display: none;
}

สิ่งนี้จะทำให้องค์ประกอบที่มองไม่เห็นของคุณจางลงและลบชั้นเรียนออก

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

หากคุณไม่ต้องการให้องค์ประกอบมองไม่เห็นจริงๆ (เช่นใช้พื้นที่ว่าง) คุณอาจต้องการกำหนดใหม่. ซ่อน (ใน css ในเครื่องของคุณอย่าเปลี่ยนแหล่งที่มาของ bootstrap หรือดีกว่าในไฟล์ LESS ในเครื่องของคุณ)

คำเตือน:

bootstrap 3.3.0 เพิ่งเปลี่ยน. ยุบเป็น:

.collapse {
  display: none;
  visibility: hidden;
}

ซึ่งเป็นการเปลี่ยนแปลงที่รุนแรงสำหรับ jQuery.show () ฉันต้องเปลี่ยนกลับไปเป็น inlining:

<div class="alert alert-danger" style="display:none;" >
</div>      

เพื่อใช้ jQuery ต่อไปดังนี้:

$('.alert').html("Change a few things up and try submitting again.").show()

คลาสเดียวที่ฉันพบใน bootstrap 3.3.0 เพื่อใช้เพียงแค่ 'display: none' คือ

.navbar {
  display: none;
}

ผมมีปัญหาเดียวกัน. ฉันใช้โปรแกรมแก้ไขนี้:

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

จากนั้นฉันก็มีปัญหาอีกครั้งเนื่องจากแอปพลิเคชันของฉันสร้างองค์ประกอบใหม่และต่อท้าย / ต่อท้าย สิ่งที่ฉันทำในที่สุดคือหลังจากสร้างองค์ประกอบใหม่ที่ฉันทำ:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

สำหรับฉันมันเป็นเพราะ bootstrap ใช้!importantแฮ็คสำหรับทั้งคลาสซ่อนและซ่อน

ดังนั้นคุณจึงไม่สามารถใช้show()วิธีอื่น ๆ ที่มาพร้อมกับ jquery แต่คุณต้องเขียนทับรหัสที่น่ากลัวยิ่งกว่านั้นโดยเขียนทับรหัสแฮ็กกี้

$('#myelement').attr('style', 'display: block !important');

! important เป็นทางเลือกสุดท้ายและไม่ควรใช้ในไลบรารีหลักเช่น bootstrap

งานนี้ .collapseแต่ฉันจะพยายามที่คำตอบแรกและเปลี่ยนการเรียนการ

.toggleClass('hidden')