Twitter Bootstrap ẩn lớp css và jQuery

Question

Tôi đang sử dụng lớp ẩn css để ẩn nút khi tải trang.

Vấn đề là khi tôi cố gắng hiển thị nút tôi đã ẩn trước với jQuery, nút này nhỏ hơn.

(điều tương tự cũng không xảy ra khi tôi sử dụng jQuery để ẩn và sau đó hiển thị nút)

Cảm ơn bạn đã trợ giúp.

Edit: hide lớp chỉ này:

.hide { 
    display: none; 
} 

nút của tôi:

<a class="btn hide" id="buttonEditComment" href="javascript:void()"><i class="icon-comment"></i> Edit comment</a> 

Javascript tôi sử dụng để hiển thị các nút:

$("#buttonEditComment").toggle(); 

Answer 1

Như dfsq nói tôi chỉ có để sử dụng removeClass("hide") thay vì toggle()

Answer 2

Nếu một phần tử có lớp "ẩn" bootstrap và bạn muốn hiển thị nó với một số hiệu ứng trượt như .slideDown(), bạn có thể lừa gạt bootstrap như:

$('#hiddenElement').hide().removeClass('hide').slideDown('fast') 

Answer 3

Tôi đồng ý với dfsq nếu tất cả các bạn muốn làm hiển thị nút. Nếu bạn muốn chuyển đổi giữa ẩn và hiển thị các nút tuy nhiên, nó là dễ dàng hơn để sử dụng:

$("#buttonEditComment").toggleClass("hide"); 

Answer 4

Đây là những gì tôi làm cho những tình huống:

tôi không bắt đầu các yếu tố html với lớp ' ẩn ', nhưng tôi đặt style = "display: none".

Điều này là do jquery bootstrap sửa đổi thuộc tính kiểu và không phải các lớp để ẩn/bỏ ẩn.

Ví dụ:

<button type="button" id="btn_cancel" class="btn default" style="display: none">Cancel</button> 

hoặc

<button type="button" id="btn_cancel" class="btn default display-hide">Cancel</button> 

Sau đó, bạn có thể chạy tất cả những điều sau đây sẽ làm việc:

$('#btn_cancel').toggle() // toggle between hide/unhide 
$('#btn_cancel').hide() 
$('#btn_cancel').show() 

Bạn cũng có thể Uso lớp của Twitter Bootstrap 'display-hide', cũng hoạt động với phương thức jQuery IU .toggle().