jQuery y CSS - Eliminar / Agregar pantalla: ninguno

Tengo un div con esta clase:

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

Y me gustaría con algunos métodos jQuery eliminar esa pantalla: ninguno; (para que se muestre el div) y luego agregarlo nuevamente (para que el div se sombree).

¿Cómo puedo hacerlo? Salud

Para ocultar el div

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

o

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

y para mostrar el div:

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

o

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

jQuery te proporciona:

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

Luego puede mostrar y ocultar fácilmente los elementos.

Entonces, déjame darte un código de muestra:

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

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

El enlace será el disparador para mostrar el div al hacer clic. Entonces su Javascript será:

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

Casi siempre es mejor dejar que jQuery maneje el estilo para ocultar y mostrar elementos.

Editar: veo que las personas de arriba recomiendan usar .showy .hidepara esto. .togglele permite hacer ambas cosas con un solo efecto. Eso es genial.

En JavaScript:

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

En jQuery:

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

Use la palanca para mostrar y ocultar.

$('#mydiv').toggle()

Consulte el ejemplo de trabajo en http://jsfiddle.net/jNqTa/

Sugeriría agregar una clase para mostrar / ocultar elementos:

.hide { display:none; }

y luego use .toggleClass () de jquery para mostrar / ocultar el elemento:

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

La única forma de eliminar un "display: none" en línea a través de css-api de jQuery es restableciéndolo con la cadena vacía (null NO funciona por cierto!).

Según el documento de jQuery, esta es la forma general de "eliminar" una propiedad de estilo en línea establecida una vez.

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

o

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

debería hacer el truco correctamente.

En mi humilde opinión, falta un método en jQuery que podría llamarse "mostrar" o "revelar" que, en lugar de simplemente establecer otra propiedad de estilo en línea, desarma el valor de visualización correctamente como se describió anteriormente. O tal vez hide()debería almacenar el valor inicial en línea y show()debería restaurar eso ...

Las funciones .show () y .hide () de jQuery son probablemente su mejor opción.

No nos está dando mucha información, pero en general esta podría ser una solución:

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

Por alguna razón, alternar no funcionó para mí, y recibí el error uncaught type error toggle is not a functional inspeccionar el elemento en el navegador. Entonces usé el siguiente código y comenzó a funcionar para mí.

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

Se utilizó el archivo de script jquery jquery-2.1.3.min.js.

Si tiene muchos elementos que le gustaría .hide()o .show(), va a desperdiciar muchos recursos para hacer lo que quiera, incluso si usa .hide(0)o.show(0) , el parámetro 0 es la duración de la animación.

A diferencia de Prototype.js .hide() y los .show()métodos que solo se utilizan para manipular el atributo de visualización del elemento, jQuery la implementación de es más compleja y no se recomienda para una gran cantidad de elementos.

En estos casos, probablemente deberías intentar .css('display','none')esconderte y .css('display','')mostrar

.css('display','block') debe evitarse, especialmente si está trabajando con elementos en línea, filas de tabla (en realidad, cualquier elemento de tabla), etc.

Teniendo en cuenta el comentario de lolesque como la mejor respuesta, puede agregar un atributo o una clase para mostrar / ocultar elementos con propiedades de visualización que difieren de lo que normalmente tiene, si su sitio necesita compatibilidad con versiones anteriores, sugeriría hacer una clase y agregar / eliminar para mostrar / mostrar el elemento

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

.news-hide {
display:none;
}

Reemplace el bloque en línea con su método de visualización preferido de su elección y use jquerys addclass https://api.jquery.com/addclass/ y removeclass https://api.jquery.com/removeclass/ en lugar de mostrar / ocultar, si está al revés la compatibilidad no es problema, puedes usar atributos como este.

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

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

Y use jquerys attr () http://api.jquery.com/attr/ para mostrar y ocultar el elemento.

Cualquiera que sea el método que prefiera, podrá implementar fácilmente animaciones css3 al mostrar / ocultar elementos de esta manera

Usar show()anuncios display:blocken lugar de los display:hidecuales podría romper cosas.

Para evitar eso, puede tener una clase con propiedad display:noney alternar esa clase para ese elemento con 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>

Ninguna de las respuestas mencionó esto.