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?

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

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

Use o bootstrap .collapse em vez de .hidden

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

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.

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

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.

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.

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

Eu gosto de usar o 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()})

})

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

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

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.

No bootstrap 4, você pode usar a d-noneclasse para ocultar um elemento completamente. https://getbootstrap.com/docs/4.0/utilities/display/

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.

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/

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. :-)

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

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

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.

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

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