jQuery & CSS - Remover / adicionar exibição: nenhuma

Eu tenho um div com esta classe:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

E eu gostaria que, com alguns métodos jQuery, remova essa exibição: none; (para que a div seja exibida) e depois adicione-a novamente (para que a div fique sombria).

Como eu posso fazer isso? Felicidades

Para ocultar o div

$('.news').hide();

ou

$('.news').css('display','none');

e para mostrar o div:

$('.news').show();

ou

$('.news').css('display','block');

O jQuery fornece:

$(".news").hide();
$(".news").show();

Você pode mostrar e ocultar facilmente o (s) elemento (s).

Então, deixe-me dar um exemplo de código:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

O link será o gatilho para mostrar a div quando clicada. Portanto, seu Javascript será:

$('.trigger').click(function() {
   $('.news').toggle();
});

É quase sempre melhor deixar o jQuery manipular o estilo para ocultar e mostrar elementos.

Editar: vejo que as pessoas acima recomendam o uso .showe .hidepara isso. .togglepermite que você faça as duas coisas com apenas um efeito. Então isso é legal.

Em JavaScript:

getElementById("id").style.display = null;

No jQuery:

$("#id").css("display","");

Use alternar para mostrar e ocultar.

$('#mydiv').toggle()

Veja o exemplo de trabalho em http://jsfiddle.net/jNqTa/

eu sugiro adicionar uma classe para exibir / ocultar elementos:

.hide { display:none; }

e use jquery's .toggleClass () para mostrar / ocultar o elemento:

$(".news").toggleClass("hide");

A única maneira de remover um "display: none" embutido via css-api do jQuery é redefinindo-o com a string vazia ( nullNÃO funciona entre !!).

De acordo com a documentação do jQuery, esta é a maneira geral de "remover" uma propriedade de estilo embutido definida uma vez.

$("#mydiv").css("display","");

ou

$("#mydiv").css({display:""});

deve fazer o truque corretamente.

IMHO, existe um método ausente no jQuery que pode ser chamado de "mostrar" ou "revelar" que, em vez de apenas definir outra propriedade de estilo embutido, desativa o valor de exibição corretamente, conforme descrito acima. Ou talvez hide()deva armazenar o valor inline inicial e show()restaurar esse ...

As funções .show () e .hide () do jQuery são provavelmente a sua melhor aposta.

Você não está nos dando muitas informações, mas em geral isso pode ser uma solução:

$("div.news").css("display", "block");

Por alguma razão, alternar não funcionou para mim e recebi o erro uncaught type error toggle is not a functionao inspecionar o elemento no navegador. Então, usei o código a seguir e ele começou a funcionar para mim.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

Arquivo de script jquery usado jquery-2.1.3.min.js.

Se você possui muitos elementos .hide()ou .show()gostaria de gastar muitos recursos para fazer o que deseja - mesmo se usar .hide(0)ou .show(0)- o parâmetro 0 é a duração da animação.

Ao contrário de Prototype.js .hide() e .show()métodos que apenas usavam para manipular o atributo de exibição do elemento, a implementação do jQuery é mais complexa e não é recomendada para um grande número de elementos.

Nesse caso, você provavelmente deve tentar .css('display','none')ocultar e .css('display','')mostrar

.css('display','block') deve ser evitado, especialmente se você estiver trabalhando com elementos embutidos, linhas da tabela (na verdade, qualquer elemento da tabela) etc.

Considerando o comentário de lolesque como melhor resposta, você pode adicionar um atributo ou uma classe para mostrar / ocultar elementos com propriedades de exibição diferentes do que normalmente possui, se o site precisar de compatibilidade com versões anteriores, sugiro criar uma classe e adicionar / remover para mostrar / exibe o elemento

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Substitua o bloco embutido pelo método de exibição preferido de sua escolha e use jquerys addclass https://api.jquery.com/addclass/ e removeclass https://api.jquery.com/removeclass/ em vez de mostrar / ocultar, se estiver para trás compatibilidade não é problema, você pode usar atributos como este.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

E use jquerys attr () http://api.jquery.com/attr/ para mostrar e ocultar o elemento.

Seja qual for o método que você preferir, você poderá implementar facilmente animações css3 ao exibir / ocultar elementos dessa maneira

O uso de show()adições display:blockno lugar das display:hidequais pode quebrar as coisas.

Para evitar isso, você pode ter uma classe com propriedade display:nonee alternar essa classe para esse elemento com toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Nenhuma das respostas mencionou isso.