Giả sử tôi tạo một phần tử HTML như thế này,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

Làm cách nào tôi có thể hiển thị và ẩn phần tử HTML đó khỏi jQuery / Javascript.

JavaScript:

$(function(){
  $("#my-div").show();
});

Kết quả: (với bất kỳ trong số này).

Tôi muốn các yếu tố trên được ẩn.

Cách đơn giản nhất để ẩn phần tử bằng Bootstrap và hiển thị nó bằng jQuery là gì?

Câu trả lời đúng

Bootstrap 4.x

Bootstrap 4.x sử dụng .d-nonelớp mới . Thay vì sử dụng một trong hai .hidden hoặc .hidenếu bạn đang sử dụng Bootstrap 4.x, hãy sử dụng .d-none.

<div id="myId" class="d-none">Foobar</div>

• Để hiển thị nó: $("#myId").removeClass('d-none');
• Để ẩn nó: $("#myId").addClass('d-none');
• Để chuyển đổi nó: $("#myId").toggleClass('d-none');

(nhờ bình luận của Fangming)

Bootstrap 3.x

Đầu tiên, đừng sử dụng .hide! Sử dụng .hidden. Như những người khác đã nói, .hidebị phản đối,

. leather có sẵn, nhưng nó không phải lúc nào cũng ảnh hưởng đến trình đọc màn hình và không được chấp nhận kể từ phiên bản 3.0.1

Thứ hai, sử dụng .toggleClass () , .addClass () và .removeClass () của jQuery

<div id="myId" class="hidden">Foobar</div>

• Để hiển thị nó: $("#myId").removeClass('hidden');
• Để ẩn nó: $("#myId").addClass('hidden');
• Để chuyển đổi nó: $("#myId").toggleClass('hidden');

Đừng sử dụng lớp css .show, nó có trường hợp sử dụng rất nhỏ. Các định nghĩa của show, hiddenvà invisiblelà trong các tài liệu .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Đơn giản:

$(function(){
  $("#my-div").removeClass('hide');
});

Hoặc nếu bạn bằng cách nào đó muốn lớp vẫn ở đó:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Sử dụng bootstrap .collapse thay vì .hidden

Sau này trong JQuery, bạn có thể sử dụng .show () hoặc. Suede () để thao tác với nó

Giải pháp này không được chấp nhận. Sử dụng giải pháp bình chọn hàng đầu.

Các hidelớp học rất hữu ích để giữ cho nội dung ẩn trên tải trang.

Giải pháp của tôi cho vấn đề này là trong quá trình khởi tạo, chuyển sang ẩn của jquery:

$('.targets').hide().removeClass('hide');

Sau đó show()và hide()nên hoạt động như bình thường.

Một cách khác để giải quyết sự phiền toái này là tạo lớp CSS của riêng bạn mà không đặt! Quan trọng ở cuối quy tắc, như sau:

.hideMe {
    display: none;
}

và được sử dụng như vậy:

<div id="header-mask" class="hideMe"></div>

và bây giờ jQuery ẩn hoạt động

$('#header-mask').show();

Phương pháp @ Dustin-graham vạch ra là cách tôi cũng làm như vậy. Cũng cần nhớ rằng bootstrap 3 hiện sử dụng "ẩn" thay vì "ẩn" theo tài liệu của họ tại getbootstrap . Vì vậy, tôi sẽ làm một cái gì đó như thế này:

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

Sau đó, bất cứ khi nào sử dụng jQuery show()và hide()các phương thức, sẽ không có xung đột.

Bắt đầu phần tử như vậy:

<div id='foo' style="display: none"></div>

Và sau đó, sử dụng sự kiện bạn muốn hiển thị, như vậy:

$('#foo').show();

Cách đơn giản nhất để đi tôi tin.

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

Javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

Tôi thích sử dụng toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// bạn thậm chí không phải thiết lập #my-div .hidecũng không !important, chỉ cần dán / lặp lại việc chuyển đổi trong chức năng sự kiện.

Gần đây đã gặp phải vấn đề này khi nâng cấp từ 2,3 lên 3,1; hoạt ảnh jQuery của chúng tôi ( slideDown ) đã bị hỏng vì chúng tôi đang ẩn trên các thành phần trong mẫu trang. Chúng tôi đã đi theo con đường tạo ra các phiên bản cách nhau của các lớp Bootstrap mà bây giờ mang quy tắc quan trọng!

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

Câu trả lời của Razz là tốt nếu bạn sẵn sàng viết lại những gì bạn đã làm.

Đã gặp rắc rối tương tự và giải quyết nó như sau:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

Vứt nó đi khi Bootstrap đi kèm với một sửa chữa cho vấn đề này.

Trong bootstrap 4, bạn có thể sử dụng d-nonelớp để ẩn hoàn toàn một phần tử. https://getbootstrap.com/docs/4.0/utilities/display/

Cập nhật : Từ bây giờ, tôi sử dụng .collapsevà $('.collapse').show().

Dành cho Bootstrap 4 Alpha 6

Đối với Bootstrap 4 bạn phải sử dụng .hidden-xs-up.

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#av Available- classes

Các lớp .hidden - * - up ẩn phần tử khi khung nhìn ở điểm dừng nhất định hoặc rộng hơn. Ví dụ: .hidden-md-up ẩn một yếu tố trên chế độ xem trung bình, lớn và cực lớn.

Ngoài ra còn có hiddenthuộc tính HTML5.

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribution

HTML5 thêm một thuộc tính toàn cầu mới có tên [hidden], được đặt theo kiểu hiển thị: không có mặc định. Mượn ý tưởng từ PureCSS, chúng tôi cải thiện mặc định này bằng cách làm cho [hidden] {display: none! Quan trọng; } để giúp ngăn màn hình của nó vô tình bị ghi đè. Mặc dù [hidden] không được hỗ trợ bởi IE10, nhưng tuyên bố rõ ràng trong CSS của chúng tôi lại xoay quanh vấn đề đó.

<input type="text" hidden>

Cũng .invisiblecó ảnh hưởng đến bố cục.

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

Lớp .invisible có thể được sử dụng để chuyển đổi chỉ mức độ hiển thị của một phần tử, có nghĩa là màn hình của nó không bị sửa đổi và phần tử vẫn có thể ảnh hưởng đến dòng chảy của tài liệu.

cả ẩn và ẩn đều không được dùng nữa và sau đó bị xóa, không còn tồn tại trong các phiên bản mới. Bạn có thể sử dụng các lớp d-none / d-sm-none / vô hình vv tùy theo nhu cầu của bạn. Lý do có thể chúng bị xóa là vì ẩn / ẩn hơi khó hiểu trong bối cảnh CSS. Trong CSS, để ẩn (ẩn) được sử dụng để hiển thị, không hiển thị. tầm nhìn và hiển thị là những thứ khác nhau.

Nếu bạn cần một lớp cho khả năng hiển thị: ẩn, thì bạn cần lớp vô hình từ các tiện ích hiển thị.

Kiểm tra bên dưới cả tiện ích hiển thị và hiển thị:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

Sử dụng đoạn mã sau cho Bootstrap 4, mở rộng jQuery:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. Đặt mã trên vào một tập tin. Giả sử "myJqExt.js"

2. Bao gồm tệp sau khi jQuery đã được bao gồm.

3. Sử dụng nó bằng cú pháp

   $ (). hideShow ('ẩn');

   $ (). hideShow ('hiển thị');

hy vọng các bạn tìm thấy nó hữu ích. :-)

Bootstrap, JQuery, không gian tên ... Có gì sai với một đơn giản:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

Bạn có thể tạo một chức năng trợ giúp nhỏ, tuân thủ KISS:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

Dựa trên các câu trả lời ở trên, tôi vừa thêm các hàm của riêng mình và điều này càng không mâu thuẫn với các hàm jquery có sẵn như. Suede (), .show (), .toggle (). Hy vọng nó giúp.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };

Tôi đã giải quyết vấn đề của mình bằng cách chỉnh sửa tệp CSS Bootstrap, xem tài liệu của họ:

.ẩn giấu:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden là những gì chúng ta cho là sử dụng bây giờ, nhưng thực tế nó là:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

JQuery "fadeIn" sẽ không hoạt động vì "khả năng hiển thị".

Vì vậy, đối với Bootstrap mới nhất,. Leather không còn được sử dụng nữa, nhưng nó vẫn nằm trong tệp min.css. Vì vậy, tôi đã rời khỏi .hidden AS IS và chỉ loại bỏ "! quan trọng" khỏi lớp ". leather" (được cho là không được chấp nhận). nhưng bạn cũng có thể ghi đè lên CSS của chính mình, tôi chỉ muốn tất cả ứng dụng của mình hoạt động giống nhau nên tôi đã thay đổi tệp CSS Bootstrap.

Và bây giờ jQuery "fadeIn ()" hoạt động.

Lý do mà tôi đã thực hiện điều này so với các đề xuất ở trên là vì khi bạn "removeClass ('. Hide')", đối tượng ngay lập tức được hiển thị và bạn bỏ qua hình ảnh động :)

Tôi hy vọng nó đã giúp người khác.

Câu trả lời sáng sủa hơn

Trong Bootstrap 4, bạn ẩn phần tử:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

Sau đó, chắc chắn, bạn có thể hiển thị nó theo nghĩa đen:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

Nhưng nếu bạn thực hiện theo cách ngữ nghĩa, bằng cách chuyển trách nhiệm từ Bootstrap sang jQuery, thì bạn có thể sử dụng các đặc tính jQuery khác như fading:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap cung cấp các lớp để chuyển đổi nội dung, xem https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Tôi hoàn toàn mới với jQuery và sau khi đọc tài liệu của họ, tôi đã tìm đến một giải pháp khác để kết hợp Twitter Bootstrap + jQuery.

Đầu tiên, giải pháp để 'ẩn' và 'hiển thị' một phần tử (lớp wsis-sụp đổ) khi nhấp vào phần tử khác (lớp wsis-toggle), là sử dụng .toggle .

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

Bạn cũng đã ẩn phần tử .wsis-collapsebằng cách sử dụng lớp Twitter Bootstrap (V3) .hidden:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Khi bạn nhấp vào .wsis-toggle, jQuery sẽ thêm một kiểu nội tuyến:

display: block

Vì !importanttrong Bootstrap Twitter, kiểu nội tuyến này không có hiệu lực, vì vậy chúng tôi cần xóa .hiddenlớp, nhưng tôi sẽ không đề xuất .removeClasscho việc này! Bởi vì khi jQuery sẽ ẩn thứ gì đó một lần nữa, nó cũng thêm một kiểu nội tuyến:

display: none

Điều này không giống với lớp .hidden của Twitter Bootstrap, cũng được tối ưu hóa cho AT (trình đọc màn hình). Vì vậy, nếu chúng tôi muốn hiển thị div ẩn, chúng tôi cần loại bỏ .hiddenlớp Twitter Bootstrap, vì vậy chúng tôi sẽ loại bỏ các tuyên bố quan trọng, nhưng nếu chúng tôi ẩn lại, chúng tôi muốn có .hiddenlại lớp! Chúng tôi có thể sử dụng [.toggleClass] [3] cho việc này.

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

Bằng cách này, bạn tiếp tục sử dụng lớp ẩn mỗi khi nội dung bị ẩn.

Cả .showlớp trong TB thực sự giống với kiểu nội tuyến của jQuery, cả hai 'display: block'. Nhưng nếu .showlớp tại một thời điểm nào đó sẽ khác, thì bạn chỉ cần thêm lớp này:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});