Como ocultar o elemento usando o Twitter Bootstrap e mostrá-lo usando o jQuery?

235

Digamos que eu crie um elemento HTML como este,

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

Como eu poderia mostrar e ocultar esse elemento HTML do jQuery / Javascript.

JavaScript:

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

Resultado: (com qualquer um destes).

Gostaria que os elementos acima estivessem ocultos.

Qual é a maneira mais simples de ocultar o elemento usando o Bootstrap e mostrá-lo usando o jQuery?

psylosss
fonte
Para manter essa questão relevante, eu a modifiquei para funcionar nos dois Bootstraps, porque a resposta é apenas uma diferença no nome da classe.
Evan Carroll

Respostas:

392

A resposta certa

Bootstrap 4.x

O Bootstrap 4.x usa a nova .d-noneclasse . Em vez de usar qualquer um .hidden , ou .hidese você estiver usando o Bootstrap 4.x, use .d-none.

<div id="myId" class="d-none">Foobar</div>
  • Para mostrá-lo: $("#myId").removeClass('d-none');
  • Para ocultá-lo: $("#myId").addClass('d-none');
  • Para alternar: $("#myId").toggleClass('d-none');

(graças ao comentário de Fangming)

Bootstrap 3.x

Primeiro, não use .hide! Use .hidden. Como outros já disseram, .hideestá obsoleto,

.hide está disponível, mas nem sempre afeta os leitores de tela e está obsoleto a partir da v3.0.1

Segundo, use .toggleClass () , .addClass () e .removeClass () da jQuery

<div id="myId" class="hidden">Foobar</div>
  • Para mostrá-lo: $("#myId").removeClass('hidden');
  • Para ocultá-lo: $("#myId").addClass('hidden');
  • Para alternar: $("#myId").toggleClass('hidden');

Não use a classe css .show, ela possui um caso de uso muito pequeno. As definições de show, hiddene invisibleestão nos docs .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
Evan Carroll
fonte
4
Muito obrigado. Eu estava pensando no stackoverflow para algo assim por um longo tempo para uma resposta simples. Obrigado
Resultados da pesquisa Resultados da Web Pi
Alguém tem uma idéia de quais são os métodos: show () e hide () para então?
Checklist
9
Então você não pode animá-lo (por exemplo fadeIn()). Portanto, use a classe em collapsevez de hidden. E depois, claro, não há necessidade para a utilização removeClass, addClassetc.
TheStoryCoder
2
Para o Bootstrap 4, você precisa usar .hidden-xs-up. v4-alpha.getbootstrap.com/layout/responsive-utilities/… Também há hiddenatributo HTML5. v4-alpha.getbootstrap.com/content/reboot/...
Chloe
1
@Kangur jQuery .hide()não é da .hideclasse de inicialização . O método jQuery funciona bem, mas não é o caminho de inicialização. As bibliotecas de bootstrap dependem da inclusão da classe .hidden no elemento para determinar que não existe. O jQuery não adiciona isso - a menos que você o corte como aqui: stackoverflow.com/a/27439371/124486 ; nesse caso, você pode quebrar outras coisas específicas do jQuery.
Evan Carroll
65

Simplesmente:

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

Ou se você, de alguma forma, deseja que a classe ainda esteja lá:

$(function(){
  $("#my-div").css('display', 'block !important');
});
Razz
fonte
1
Aqui está um plugin jQuery que permite usar .show () e .hide () mesmo com as classes 'hidden' e 'hide' da auto-inicialização. gist.github.com/zimkies/8360181
zimkies
9
De acordo com a documentação do Bootstrap, .hide está disponível, mas nem sempre afeta os leitores de tela e está obsoleto na v3.0.1. Use apenas .hidden ou .sr.
precisa saber é o seguinte
18

Use o bootstrap .collapse em vez de .hidden

Posteriormente no JQuery, você pode usar .show () ou .hide () para manipulá-lo

Iván
fonte
16

Esta solução está obsoleta. Use a melhor solução votada.

A hideclasse é útil para manter o conteúdo oculto no carregamento da página.

Minha solução para isso é durante a inicialização, alterne para hide do jquery:

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

Então show()e hide()deve funcionar normalmente.

Dustin Graham
fonte
1
.hide está obsoleto a partir da v3.0.1
Evan Carroll
2
Ok, use .hidden a partir da v3.0.1
Dustin Graham
Nesse caso, pode haver oscilações de conteúdo que são mostradas por microssegundos antes de serem ocultadas com JS.
Sergey Romanov
Chamar .hide () primeiro aplica display: none; para a marca de estilo. Isso acontece antes da remoção da classe hide. Se você o tiver nessa ordem, não deverá piscar.
Dustin Graham
14

Outra maneira de lidar com esse aborrecimento é criar sua própria classe CSS que não define o! Important no final da regra, assim:

.hideMe {
    display: none;
}

e usado assim:

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

e agora o jQuery oculta funciona

$('#header-mask').show();
dbrin
fonte
Ele contorna o problema colocado usando as classes do bootstrap. Por que reduzir o voto desta solução curta e simples?
Dbrin
Porque esta solução curta e simples não responde à pergunta que exige especificamente o uso das classes do bootstrap3. Para não mencionar, embora simples, .hidden em Bootstrap é definida como .hidden { display: none !important; visibility: hidden !important; }
Evan Carroll
2
e esse é exatamente o problema, os métodos de ocultar e mostrar do JQuery não funcionam bem com esse css.
dbrin
5

O método @ dustin-graham descrito é como eu também o faço. Lembre-se também de que o bootstrap 3 agora usa "hidden" em vez de "hide" conforme a documentação deles no getbootstrap . Então, eu faria algo assim:

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

Então, sempre que usar o jQuery show()e hide()métodos, não haverá conflito.

MichaelJTaylor
fonte
Tão elegante e simples - você acabou de superar uma deficiência comum do Bootstrap. Eu usaria hiddenclasse e tentaria fazer show()no jQuery, e nada aconteceria. Sua solução corrige isso com tanta facilidade, e eu não pensei nisso.
Volomike
5

Inicie o elemento com:

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

E então, use o evento que você deseja mostrá-lo, como tal:

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

O caminho mais simples a seguir, acredito.

Théo T. Carranza
fonte
3

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();
});
Andres Separ
fonte
2

Eu gosto de usar o toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
AndreDurao
fonte
Isso seria ótimo, mas switchnão é totalmente necessário.
Evan Carroll
2
$(function(){

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

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

})

// você nem precisa definir o #my-div .hidenor !important, basta colar / repetir a alternância na função de evento.

Ray C Lin
fonte
2

Recentemente, tive esse problema ao atualizar de 2,3 para 3,1; nossas animações jQuery ( slideDown ) foram interrompidas porque estávamos ocultando os elementos no modelo de página. Seguimos o caminho da criação de versões com espaçamento de nome das classes Bootstrap que agora possuem a regra feia ! Importante .

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
JacksonT
fonte
3.1 não suporta .hide, ele tem .hidden.
Evan Carroll
2

A resposta de Razz é boa se você estiver disposto a reescrever o que fez.

Estava com o mesmo problema e trabalhou com o seguinte:

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

Jogue fora quando o Bootstrap vier com uma correção para esse problema.

menino mau
fonte
1
É necessário ou ideal verificar se a classe existe antes de você ligar .removeClass()ou .addClass()?
Evan Carroll
Além disso, ainda não .removeClass()funciona sobre o conjunto? Você não poderia simplesmente ligar #$(this).removeClass('show')
Evan Carroll
2

Atualização : A partir de agora, eu uso .collapsee $('.collapse').show().


Para Bootstrap 4 Alpha 6

Para o Bootstrap 4, você precisa usar .hidden-xs-up.

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

As classes .hidden - * - up ocultam o elemento quando a janela de exibição está no ponto de interrupção especificado ou mais amplo. Por exemplo, .hidden-md-up oculta um elemento nas viewports médias, grandes e extra grandes.

Há também o hiddenatributo HTML5.

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

O HTML5 adiciona um novo atributo global chamado [oculto], denominado como exibição: nenhum por padrão. Tomando emprestada uma idéia do PureCSS, aprimoramos esse padrão, tornando [oculto] {display: none! Important; } para ajudar a impedir que sua exibição seja acidentalmente substituída. Embora [oculto] não seja suportado nativamente pelo IE10, a declaração explícita em nosso CSS contorna esse problema.

<input type="text" hidden>

Há também o .invisibleque afeta o layout.

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

A classe .invisible pode ser usada para alternar apenas a visibilidade de um elemento, o que significa que sua exibição não é modificada e o elemento ainda pode afetar o fluxo do documento.

Chloe
fonte
1

hide e hidden são preteridos e removidos posteriormente, não existem mais em novas versões. Você pode usar as classes d-none / d-sm-none / invisível etc, dependendo de suas necessidades. A provável razão pela qual eles foram removidos é porque oculto / oculto é um pouco confuso no contexto CSS. Em CSS, ocultar (oculto) é usado para visibilidade, não para exibição. visibilidade e exibição são coisas diferentes.

Se você precisar de uma classe para visibilidade: oculta, precisará de uma classe invisível nos utilitários de visibilidade.

Verifique abaixo os utilitários de visibilidade e exibição:

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

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

Selay
fonte
1

Use o seguinte trecho para o Bootstrap 4, que estende o 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. Coloque o código acima em um arquivo. Vamos supor "myJqExt.js"
  2. Inclua o arquivo após a inclusão do jQuery.

  3. Use-o usando a sintaxe

    $ (). hideShow ('ocultar');

    $ (). hideShow ('show');

espero que vocês achem útil. :-)

isteeak
fonte
0

Bootstrap, JQuery, namespaces ... O que há de errado com um simples:

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

Você pode criar uma pequena função auxiliar, compatível com o 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
Edakos
fonte
0

Com base nas respostas acima, adicionei minhas próprias funções e isso ainda não entra em conflito com as funções jquery disponíveis, como .hide (), .show (), .toggle (). Espero que ajude.

    /*
     * .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;
    };
Sagar Gala
fonte
0

Resolvi meu problema editando o arquivo CSS do Bootstrap, consulte o documento:

.ocultar:

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

.hide {
  display: none !important;
}

.hidden é o que devemos usar agora, mas na verdade é:

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

O jQuery "fadeIn" não funcionará por causa da "visibilidade".

Portanto, para o Bootstrap mais recente, o .hide não está mais em uso, mas ainda está no arquivo min.css. então eu deixei .hidden AS IS e apenas removi o "! important" da classe ".hide" (que deveria ser preterida de qualquer maneira). mas você também pode substituí-lo em seu próprio CSS. Eu só queria que todo o meu aplicativo agisse da mesma maneira, então mudei o arquivo CSS do Bootstrap.

E agora o jQuery "fadeIn ()" funciona.

A razão pela qual eu fiz isso versus as sugestões acima é porque, quando você "removeClass ('. Hide')", o objeto é imediatamente exibido e você pula a animação :)

Espero que tenha ajudado outros.

Ricky Levi
fonte
0

☀️ A resposta mais correta

No Bootstrap 4, você oculta o elemento:

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

🛑 Então, claro, você pode literalmente mostrá-lo com:

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

💓 Mas se você fizer da maneira semântica, transferindo a responsabilidade do Bootstrap para o jQuery, poderá usar outras sutilezas do jQuery, como o fading:

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

O Twitter Bootstrap fornece classes para alternar conteúdo, consulte https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Sou completamente novo no jQuery e, depois de ler os documentos, cheguei a outra solução para combinar o Twitter Bootstrap + jQuery.

Primeiro, a solução para 'ocultar' e 'mostrar' um elemento (classe wsis-collapse) ao clicar em outro elemento (classe wsis-toggle) é usar .toggle .

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

Você já ocultou o elemento .wsis-collapseusando a classe Twitter Bootstrap (V3) .hiddentambém:

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

Quando você clica em .wsis-toggle, o jQuery está adicionando um estilo embutido:

display: block

Por causa do !importantno Twitter Bootstrap, esse estilo embutido não tem efeito, portanto, precisamos remover a .hiddenclasse, mas não recomendo .removeClass! Porque quando o jQuery oculta algo novamente, ele também adiciona um estilo embutido:

display: none

Isso não é o mesmo que a classe .hidden do Twitter Bootstrap, que também é otimizada para AT (leitores de tela). Portanto, se queremos mostrar a div oculta, precisamos nos livrar da .hiddenclasse do Twitter Bootstrap, para nos livrarmos das declarações importantes, mas se a ocultarmos novamente, queremos que a .hiddenclasse volte novamente! Podemos usar [.toggleClass] [3] para isso.

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

Dessa forma, você continua usando a classe oculta toda vez que o conteúdo é oculto.

A .showclasse em TB é realmente a mesma que o estilo embutido do jQuery, ambos 'display: block'. Mas se a .showclasse em algum momento for diferente, você simplesmente adiciona essa classe:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});
user2312234
fonte
@EvanCarroll, por que é complexo? Também li sua resposta e vejo que você sugere usar o toggleClass, o que também faço, para não entender seu comentário.
User2312234