jQuery show () cho lớp css Twitter Bootstrap ẩn

Tôi đang sử dụng Twitter Bootstrap và tôi nhận thấy rằng jQuery show()hoặc fadeIn()không làm cho phần tử DOM được đánh dấu bằng lớp hiddenxuất hiện bởi vì các hàm jQuery chỉ loại bỏ display: noneđặc tả. Tuy nhiên, visibilityvẫn được đặt thành hidden.

Tôi tự hỏi cách tốt nhất có thể để giải quyết vấn đề này là gì?

1. Xóa hiddenlớp trên phần tử
2. Thay đổi thuộc tính hiển thị
3. Ghi đè lớp ẩn trong css của riêng tôi

Đặc biệt, tôi muốn biết liệu sửa lỗi này bằng jQuery hay css thì tốt hơn và tại sao.

Lớp css bạn đang tìm là .collapse. Điều này đặt phần tử thànhdisplay: none;

Vì vậy, sử dụng $('#myelement').show()sẽ hoạt động đúng cách.

CẬP NHẬT: Bootstrap v3.3.6 đã cập nhật .collapse trở lại:

.collapse {
  display: none;
}

Điều này sẽ làm mờ phần tử vô hình của bạn trong và xóa lớp

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

http://jsfiddle.net/7qxVL/

Nếu bạn không thực sự cần phần tử ẩn (tức là chiếm dung lượng) thì bạn có thể muốn xác định lại .hiised (trong css cục bộ của bạn, không thay đổi nguồn bootstrap, hoặc thậm chí tốt hơn, trong tệp LESS cục bộ của bạn).

Cảnh báo:

bootstrap 3.3.0 vừa thay đổi .collapse thành:

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

Đó là một thay đổi đột phá cho jQuery.show (), tôi đã phải hoàn nguyên về nội tuyến:

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

để tiếp tục sử dụng jQuery như sau:

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

Lớp duy nhất tôi có thể tìm thấy trong bootstrap 3.3.0 để áp dụng chỉ 'display: none' là

.navbar {
  display: none;
}

Tôi đã từng gặp vấn đề tương tự. Tôi đã sử dụng bản vá này:

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

Sau đó, tôi gặp một vấn đề khác, vì ứng dụng của tôi tạo ra các phần tử mới và thêm / thêm chúng vào. Cuối cùng những gì tôi đã làm là sau khi tạo phần tử mới, tôi làm:

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

Đối với tôi, đó là bởi vì bootstrap đang sử dụng !importanthack cho cả ẩn và ẩn lớp.

Vì vậy, bạn không thể sử dụng các show()phương thức vv được cung cấp với jquery. Thay vào đó, bạn phải ghi đè lên mã thậm chí còn khủng khiếp hơn ghi đè lên mã hacky.

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

! important là phương án cuối cùng và thực sự không nên sử dụng trong thư viện lõi như bootstrap.

Điều này hoạt động, nhưng tôi sẽ thử câu trả lời đầu tiên và thay đổi các lớp thành .collapse.

.toggleClass('hidden')