Katakanlah saya membuat elemen HTML seperti ini,

<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>

Bagaimana saya bisa menampilkan dan menyembunyikan elemen HTML itu dari jQuery / Javascript.

JavaScript:

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

Hasil: (dengan semua ini).

Saya ingin elemen-elemen di atas disembunyikan.

Apa cara paling sederhana untuk menyembunyikan elemen menggunakan Bootstrap dan menunjukkannya menggunakan jQuery?

Jawaban yang benar

Bootstrap 4.x

Bootstrap 4.x menggunakan .d-nonekelas baru . Alih-alih menggunakan salah satu .hidden , atau .hidejika Anda menggunakan Bootstrap 4.x gunakan .d-none.

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

• Untuk menunjukkannya: $("#myId").removeClass('d-none');
• Untuk menyembunyikannya: $("#myId").addClass('d-none');
• Untuk beralih: $("#myId").toggleClass('d-none');

(terima kasih atas komentar dari Fangming)

Bootstrap 3.x

Pertama, jangan gunakan .hide! Gunakan .hidden. Seperti yang orang lain katakan, .hidesudah usang,

.hide tersedia, tetapi tidak selalu memengaruhi pembaca layar dan tidak digunakan lagi pada v3.0.1

Kedua, gunakan .toggleClass () , .addClass () dan .removeClass () jQuery

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

• Untuk menunjukkannya: $("#myId").removeClass('hidden');
• Untuk menyembunyikannya: $("#myId").addClass('hidden');
• Untuk beralih: $("#myId").toggleClass('hidden');

Jangan gunakan kelas css .show, ini memiliki kasus penggunaan yang sangat kecil. Definisi show, hiddendan invisibleada dalam dokumen .

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

Secara sederhana:

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

Atau jika Anda ingin agar kelas tetap ada di sana:

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

Gunakan bootstrap .collapse alih-alih .hidden

Kemudian di JQuery Anda dapat menggunakan .show () atau .hide () untuk memanipulasinya

Solusi ini sudah usang. Gunakan solusi terpilih teratas.

The hidekelas ini berguna untuk menjaga konten tersembunyi di halaman beban.

Solusi saya untuk ini adalah selama inisialisasi, beralih ke jquery's hide:

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

Maka show()dan hide()harus berfungsi seperti biasa.

Cara lain untuk mengatasi gangguan ini adalah dengan membuat kelas CSS Anda sendiri yang tidak mengatur! Penting di akhir aturan, seperti ini:

.hideMe {
    display: none;
}

dan digunakan seperti ini:

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

dan sekarang jQuery menyembunyikan karya

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

Metode @ dustin-graham diuraikan adalah bagaimana saya melakukannya juga. Ingat juga bahwa bootstrap 3 sekarang menggunakan "tersembunyi" alih-alih "sembunyikan" sesuai dokumentasinya di getbootstrap . Jadi saya akan melakukan sesuatu seperti ini:

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

Maka setiap kali menggunakan jQuery show()dan hide()metode, tidak akan ada konflik.

Mulailah elemen dengan seperti:

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

Dan kemudian, gunakan acara yang ingin Anda tunjukkan, seperti:

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

Cara termudah untuk pergi, saya percaya.

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();
});

Saya suka menggunakan 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()})

})

// Anda bahkan tidak perlu mengatur #my-div .hidejuga !important, cukup tempel / ulangi sakelar di fungsi acara.

Baru-baru ini mengalami ini ketika meningkatkan dari 2,3 ke 3,1; animasi jQuery kami ( slideDown ) rusak karena kami menyembunyikan elemen pada templat halaman. Kami menempuh rute untuk menciptakan versi kelas Bootstrap yang diberi nama spasi yang sekarang menjalankan aturan penting yang jelek !

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

Jawaban Razz baik jika Anda ingin menulis ulang apa yang telah Anda lakukan.

Berada dalam masalah yang sama dan menyelesaikannya dengan yang berikut:

/**
 * 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);

Buang ketika Bootstrap dilengkapi dengan perbaikan untuk masalah ini.

Di bootstrap 4 Anda bisa menggunakan d-nonekelas untuk menyembunyikan elemen sepenuhnya. https://getbootstrap.com/docs/4.0/utilities/display/

Pembaruan : Mulai sekarang, saya menggunakan .collapsedan $('.collapse').show().

Untuk Bootstrap 4 Alpha 6

Untuk Bootstrap 4 Anda harus menggunakan .hidden-xs-up.

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

Kelas .hidden - * - up menyembunyikan elemen ketika viewport berada pada breakpoint yang diberikan atau lebih luas. Misalnya, .hidden-md-up menyembunyikan elemen pada viewports sedang, besar, dan ekstra besar.

Ada juga hiddenatribut HTML5.

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

HTML5 menambahkan atribut global baru bernama [tersembunyi], yang ditata sebagai tampilan: tidak ada secara default. Meminjam gagasan dari PureCSS, kami meningkatkan standar ini dengan membuat [disembunyikan] {display: none! Important; } untuk membantu mencegah tampilannya tidak sengaja diganti. Meskipun [tersembunyi] tidak didukung secara native oleh IE10, deklarasi eksplisit dalam CSS kami mengatasi masalah itu.

<input type="text" hidden>

Ada juga .invisibleyang tidak mempengaruhi tata letak.

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

Kelas .invisible dapat digunakan untuk mengaktifkan hanya visibilitas elemen, artinya tampilannya tidak dimodifikasi dan elemen masih dapat mempengaruhi aliran dokumen.

sembunyikan dan sembunyikan sama-sama ditinggalkan dan kemudian dihapus, tidak ada lagi di versi baru. Anda dapat menggunakan kelas dll d-tidak ada / d-sm-tidak ada / tidak terlihat tergantung pada kebutuhan Anda. Kemungkinan alasan mereka dihapus adalah karena tersembunyi / sembunyikan agak membingungkan dalam konteks CSS. Dalam CSS, untuk menyembunyikan (tersembunyi) digunakan untuk visibilitas, bukan untuk tampilan. visibilitas dan tampilan adalah hal yang berbeda.

Jika Anda membutuhkan kelas visibilitas: tersembunyi, maka Anda perlu kelas tak terlihat dari utilitas visibilitas.

Periksa utilitas visibilitas dan tampilan di bawah ini:

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

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

Gunakan cuplikan berikut untuk Bootstrap 4, yang meluas 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. Masukkan kode di atas dalam file. Misalkan "myJqExt.js"

2. Sertakan file setelah jQuery dimasukkan.

3. Gunakan itu menggunakan sintaks

   $ (). hideShow ('hide');

   $ (). hideShow ('show');

semoga kalian bermanfaat. :-)

Bootstrap, JQuery, namespaces ... Apa yang salah dengan yang sederhana:

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

Anda dapat membuat fungsi pembantu kecil, KISS compliant:

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

Berdasarkan jawaban di atas, saya baru saja menambahkan fungsi saya sendiri dan ini lebih jauh tidak bertentangan dengan fungsi jquery yang tersedia seperti .hide (), .show (), .toggle (). Semoga ini bisa membantu.

    /*
     * .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;
    };

Saya memecahkan masalah saya dengan mengedit file CSS Bootstrap, lihat dokumen mereka:

.menyembunyikan:

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

.hide {
  display: none !important;
}

.hidden adalah apa yang seharusnya kita gunakan sekarang, tetapi sebenarnya:

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

"FadeIn" jQuery tidak akan berfungsi karena "visibilitas".

Jadi, untuk Bootstrap terbaru, .hide tidak lagi digunakan, tetapi masih dalam file min.css. jadi saya meninggalkan .hidden SEBAGAIMANA ADANYA dan baru saja menghapus kelas "! Penting" dari kelas ".Sembunyikan" (yang seharusnya sudah tidak digunakan lagi). tetapi Anda juga bisa menimpanya di CSS Anda sendiri, saya hanya ingin semua aplikasi saya bertindak sama sehingga saya mengubah file Bootstrap CSS.

Dan sekarang jQuery "fadeIn ()" berfungsi.

Alasan saya melakukan ini vs saran di atas, adalah karena ketika Anda "removeClass ('. Hide')" objek segera ditampilkan, dan Anda melewatkan animasi :)

Saya harap ini membantu orang lain.

☀️ Jawaban yang tepat

Di Bootstrap 4 Anda menyembunyikan elemen:

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

🛑 Maka, tentu saja, Anda dapat benar-benar menunjukkannya dengan:

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

💓 Tetapi jika Anda melakukannya dengan cara semantik, dengan mentransfer tanggung jawab dari Bootstrap ke jQuery, maka Anda dapat menggunakan basa-basi jQuery lainnya seperti memudar:

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

Twitter Bootstrap menyediakan kelas untuk mengganti konten, lihat https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Saya benar-benar baru di jQuery, dan setelah membaca dokumen mereka, saya datang ke solusi lain untuk menggabungkan Twitter Bootstrap + jQuery.

Pertama, solusi untuk 'menyembunyikan' dan 'menampilkan' suatu elemen (class wsis-collapse) ketika mengklik elemen lain (class wsis-toggle), adalah dengan menggunakan .toggle .

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

Anda telah menyembunyikan elemen .wsis-collapsedengan menggunakan kelas Twitter Bootstrap (V3) .hiddenjuga:

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

Ketika Anda mengklik .wsis-toggle, jQuery menambahkan gaya inline:

display: block

Karena ada !importantdi Bootstrap Twitter, gaya inline ini tidak berpengaruh, jadi kami harus menghapus .hiddenkelas, tetapi saya tidak akan merekomendasikan .removeClassini! Karena ketika jQuery akan menyembunyikan sesuatu lagi, itu juga menambahkan gaya inline:

display: none

Ini tidak sama dengan kelas Twitter Bootstrap, yang dioptimalkan untuk AT juga (pembaca layar). Jadi, jika kita ingin menunjukkan div yang tersembunyi, kita harus menyingkirkan .hiddenkelas Bootstrap Twitter, jadi kita menyingkirkan pernyataan penting, tetapi jika kita menyembunyikannya lagi, kita ingin .hiddenkelas kembali lagi! Kita dapat menggunakan [.toggleClass] [3] untuk ini.

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

Dengan cara ini Anda terus menggunakan kelas tersembunyi setiap kali konten disembunyikan.

The .showkelas dalam TB sebenarnya sama dengan gaya inline dari jQuery, baik 'display: block'. Tetapi jika .showkelas di beberapa titik akan berbeda, maka Anda cukup menambahkan kelas ini juga:

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