jQuery & CSS-Eliminar / Añadir pantalla: ninguno

JQuery le proporciona:

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

Puede mostrar y ocultar fácilmente los elementos.

En JavaScript:

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

En jQuery:

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

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

<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 cuando se haga clic. Así que tu 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 arriba recomiendan usar .show y .hide para esto. .toggle le permite hacer ambas cosas con un solo efecto. Así que eso es genial.

Use toggle para mostrar y ocultar.

$('#mydiv').toggle()

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

Sugiero agregar una clase para mostrar / ocultar elementos:

.hide { display:none; }

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

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

JQuery .show() y .las funciones hide () son probablemente tu mejor opción.

La única manera 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!!).

De acuerdo con el documento jQuery, esta es la forma general de "eliminar" una propiedad de estilo inline establecida una vez.

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

O

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

Debe 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 desactiva el valor de visualización correctamente como se describió anteriormente. O tal vez hide() debería almacenar el valor inline inicial y show() debería restaurarlo...

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

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

Por alguna razón, toggle no me funcionó y recibió un error:"uncaught typeerror toggle no es una función". en inspeccionar elemento en el navegador. Así que usé el siguiente código y comenzó a funcionar para mí.

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

Archivo de script jquery usado con la versión: 'jquery-2.1.3.min.js".

Si tienes muchos elementos que te gustaría .hide() o .show(), vas a desperdiciar muchos recursos para hacer lo que quieras - incluso si usas .hide(0) o .show(0) - el parámetro 0 es la duración de la animación.

A diferencia de Prototipo.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery's implementation is more complex and not recommended for a large number of elements.

En estos casos usted debe probablemente intente .css('display','none') ocultar 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 para responder mejor, 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 agregarla/eliminarla 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 la compatibilidad hacia atrás no es un problema, puede 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.

El método que prefieras te permite implementar fácilmente animaciones css3 al mostrar / ocultar elementos de esta manera