Diyelim ki böyle bir HTML öğesi oluşturuyorum,

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

Bu HTML öğesini jQuery / Javascript'ten nasıl gösterebilir ve gizleyebilirim.

JavaScript:

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

Sonuç: (bunlardan herhangi biriyle).

Yukarıdaki öğelerin gizlenmesini istiyorum.

Öğe Bootstrap kullanarak gizlemenin ve jQuery kullanarak göstermenin en basit yolu nedir?

Doğru cevap

Bootstrap 4.x

Bootstrap 4.x yeni .d-nonesınıfı kullanır . Bunun yerine kullanmanın ya .hidden ya .hidesen Bootstrap 4.x kullanımını kullanıyorsanız .d-none.

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

• Göstermek için: $("#myId").removeClass('d-none');
• Gizlemek için: $("#myId").addClass('d-none');
• Geçiş yapmak için: $("#myId").toggleClass('d-none');

(Fangming'in yorumu sayesinde)

Bootstrap 3.x

İlk olarak, kullanmayın .hide! Kullanın .hidden. Diğerlerinin söylediği gibi .hide, kullanımdan kaldırıldı,

.hide kullanılabilir, ancak her zaman ekran okuyucularını etkilemez ve v3.0.1'den itibaren kullanımdan kaldırılmıştır.

İkinci olarak, jQuery's .toggleClass () , .addClass () ve .removeClass () kullanın

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

• Göstermek için: $("#myId").removeClass('hidden');
• Gizlemek için: $("#myId").addClass('hidden');
• Geçiş yapmak için: $("#myId").toggleClass('hidden');

Css sınıfını kullanmayın, .showçok küçük bir kullanım durumu vardır. Tanımları show, hiddenve invisiblevardır docs .

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

basitçe:

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

Ya da bir şekilde sınıfın hala orada olmasını istiyorsanız:

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

.Hidden yerine bootstrap .collapse kullanın

Daha sonra JQuery'de manipüle etmek için .show () veya .hide () kullanabilirsiniz.

Bu çözüm kullanımdan kaldırıldı. En çok oy alan çözümü kullanın.

hideSınıf sayfa yüklemesinde gizli içerik tutmak için yararlıdır.

Bu benim çözüm başlatma sırasında, jquery's hide geçmek:

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

Sonra show()ve hide()normal bir şekilde çalışmalıdır.

Bu rahatsızlığı ele almanın bir başka yolu da, kuralın sonunda!

.hideMe {
    display: none;
}

ve şu şekilde kullanılır:

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

ve şimdi jQuery gizleme işleri

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

@ Dustin-graham özetlenen yöntem ben de nasıl yaparım. Ayrıca bootstrap 3'ün getbootstrap'deki belgelerine göre "hide" yerine "hidden" kullandığını da unutmayın . Yani böyle bir şey yapardım:

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

Daha sonra jQuery show()ve hide()yöntemleri her kullandığınızda, çakışma olmayacaktır.

Öğeyi şu şekilde başlatın:

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

Ardından, göstermek istediğiniz etkinliği şu şekilde kullanın:

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

Gitmenin en basit yoluna inanıyorum.

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

ToggleClass'ı kullanmayı seviyorum:

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

})

// #my-div .hidene ayarlamanıza bile gerek yok !important, sadece olay işlevine geçişi yapıştırın / tekrarlayın.

Son zamanlarda 2.3'ten 3.1'e yükseltirken buna rastladı; jQuery animasyonlarımız ( slideDown ) , sayfa şablonundaki öğelere gizleme yaptığımız için kırıldı . Şimdi çirkin ! Önemli kuralı taşıyan Bootstrap sınıflarının ad aralıklı sürümlerini oluşturma yoluna gittik .

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

Yaptıklarınızı yeniden yazmak istiyorsanız, Razz'ın cevabı iyidir.

Aynı sorun vardı ve aşağıdaki ile çalıştı:

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

Bootstrap bu sorun için bir düzeltme ile geldiğinde atın.

Bootstrap 4'te d-nonebir elemanı tamamen gizlemek için sınıfı kullanabilirsiniz . https://getbootstrap.com/docs/4.0/utilities/display/

Güncelleme : Şu andan itibaren .collapseve kullanıyorum $('.collapse').show().

Bootstrap 4 Alpha 6 için

Bootstrap 4 için kullanmanız gerekir .hidden-xs-up.

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

.Hidden - * - yukarı sınıfları, görünüm verilen kesme noktasında veya daha geniş olduğunda öğeyi gizler. Örneğin, .hidden-md-up bir öğeyi orta, büyük ve çok büyük görünüm pencerelerinde gizler.

Ayrıca hiddenHTML5 özelliği vardır.

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

HTML5, [hidden] adında yeni bir global özellik ekler. PureCSS'den bir fikir ödünç alarak, [gizli] {display: none! } ekranının yanlışlıkla geçersiz kılınmasını önlemeye yardımcı olmak için. [Hidden], IE10 tarafından yerel olarak desteklenmese de, CSS'mizdeki açık bildirim bu sorunu çözmektedir.

<input type="text" hidden>

Ayrıca birde şu var .invisible düzeni etkileyen vardır.

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

.İnvisible sınıfı, bir öğenin yalnızca görünürlüğünü değiştirmek için kullanılabilir, yani görüntüsü değiştirilmez ve öğe yine de belgenin akışını etkileyebilir.

hide ve hidden hem kullanımdan kaldırıldı hem de daha sonra kaldırıldı, artık yeni sürümlerde mevcut değil. İhtiyaçlarınıza bağlı olarak d-none / d-sm-none / invisible etc sınıflarını kullanabilirsiniz. Çıkarılmalarının olası nedeni, gizli / gizle'nin CSS bağlamında biraz kafa karıştırıcı olmasıdır. CSS'de gizlemek (gizli) görünürlük için kullanılır, görüntüleme için değil. görünürlük ve görüntüleme farklı şeylerdir.

Görünürlük için bir sınıfa ihtiyacınız varsa: gizli, görünürlük yardımcı programlarından görünmez sınıfa ihtiyacınız vardır.

Hem görünürlük hem de görüntü yardımcı programlarını aşağıdan kontrol edin:

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

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

JQuery'yi genişleten Bootstrap 4 için aşağıdaki snippet'i kullanın:

(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. Yukarıdaki kodu bir dosyaya yerleştirin. Diyelim ki "myJqExt.js"

2. JQuery dahil edildikten sonra dosyayı dahil edin.

3. Sözdizimini kullanarak kullanın

   $ () GizleGöster ( 'gizle').;

   $ () GizleGöster ( 'şov.');

Umarım faydalı bulursunuz. :-)

Bootstrap, JQuery, ad alanları ... Basit bir sorun var:

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

KISS uyumlu küçük bir yardımcı işlev oluşturabilirsiniz:

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

Yukarıdaki yanıtlara dayanarak, kendi işlevlerimi ekledim ve bu ayrıca .hide (), .show (), .toggle () gibi mevcut jquery işlevleriyle çakışmaz. Umarım yardımcı olur.

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

Sorunumu Bootstrap CSS dosyasını düzenleyerek çözdüm, belgelerine bakın:

.saklamak:

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

.hide {
  display: none !important;
}

.hidden şimdi kullanmamız gereken şey, ama aslında:

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

JQuery "fadeIn", "görünürlük" nedeniyle çalışmaz.

Bu nedenle, en son Bootstrap için .hide artık kullanılmamaktadır, ancak yine de min.css dosyasındadır. Bu yüzden .hidden OLDUĞUM gibi bıraktım ve sadece "! önemli" yi ".hide" sınıfından (yine de kullanımdan kaldırılması gerekiyordu) kaldırdım. ancak kendi CSS'nizde de geçersiz kılabilirsiniz, sadece tüm uygulamamın aynı şekilde hareket etmesini istedim, böylece Bootstrap CSS dosyasını değiştirdim.

Ve şimdi jQuery "fadeIn ()" çalışıyor.

Bunu yukarıdaki önerilere karşı yapmamın sebebi, "removeClass ('. Hide')" nesnesini hemen gösterdiğinizde ve animasyonu atladığınızda :)

Umarım başkalarına yardımcı olmuştur.

☀️ Righter cevabı

Bootstrap 4'te elemanı gizlersiniz:

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

🛑 O zaman, elbette, bunu tam anlamıyla gösterebilirsiniz:

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

💓 Ama bunu semantik bir şekilde yaparsanız, sorumluluğu Bootstrap'tan jQuery'ye aktararak, solma gibi diğer jQuery özelliklerini kullanabilirsiniz:

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

Twitter Bootstrap içeriği değiştirmek için sınıflar sağlar, bkz. Https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

JQuery'de tamamen yeniyim ve belgelerini okuduktan sonra Twitter Bootstrap + jQuery'yi birleştirmek için başka bir çözüme geldim.

İlk olarak, 'deri' ve 'göstermek' bir eleman (sınıf WSIS-çökme) bir başka eleman üzerine doğrudan (sınıf WSIS-geçiş), çözüm kullanmaktır .toggle .

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

.wsis-collapseTwitter Bootstrap (V3) sınıfını kullanarak öğeyi zaten gizlediniz .hidden:

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

Eğer tıkladığınızda .wsis-toggle, jQuery bir satır içi stil ekliyor:

display: block

Yüzünden !important Heyecan Bootstrap içinde, biz kaldırmak gerekir bu nedenle bu satır içi stil, hiçbir etkisi yoktur .hiddensınıfı, ancak tavsiye olmaz .removeClassbunun için! Çünkü jQuery bir şeyi tekrar gizleyecekse, aynı zamanda satır içi bir stil de ekler:

display: none

Bu, AT için de optimize edilmiş olan Twitter Bootstrap'ın .hidden sınıfı ile aynı değildir (ekran okuyucular). Yani, gizli div'i göstermek istiyorsak .hidden, Twitter Bootstrap sınıfından kurtulmamız gerekiyor , bu yüzden önemli ifadelerden kurtuluyoruz, ancak tekrar gizlersek, .hiddensınıfı tekrar geri istiyoruz ! Bunun için [.toggleClass] [3] kullanabiliriz.

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

Bu şekilde, içerik her gizlendiğinde gizli sınıfı kullanmaya devam edersiniz.

TB'deki .showsınıf aslında jQuery'nin satır içi stili ile aynıdır 'display: block'. Ancak bir .shownoktada sınıf farklı olacaksa, bu sınıfı da eklemeniz yeterlidir:

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