Alternar visualización: ninguno estilo con JavaScript

Quiero cambiar el estilo (segunda línea a continuación) para eliminar la parte display: none; cuando el usuario hace clic en el enlace "Mostrar todas las etiquetas". Si el usuario vuelve a hacer clic en el enlace "Mostrar todas las etiquetas", necesito que se agregue el texto display: none; a la declaración "estilo ...".Alternar visualización: ninguno estilo con JavaScript

<a href="#" title="Show Tags">Show All Tags</a> 
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

He buscado aquí y en Google un ejemplo que puedo aplicar a mi situación. He encontrado muchos ejemplos usando 2 bloques DIV para mostrar/ocultar. Realmente necesito hacerlo de esta manera, modificando el elemento de estilo html. ¿Alguien tiene un ejemplo (o proporciona un enlace a un ejemplo) que hace este tipo de alternar con el texto display: none?

Fuente

2011-12-10 Josh Bond

¿Está utilizando jQuery? – jQuerybeast

Da tu ul un id,

<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

luego hacer

var yourUl = document.getElementById("yourUlId"); 
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';

SI estás usando jQuery, esto se convierte en:

var $yourUl = $("#yourUlId"); 
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');

Por último, se dijo específicamente que querías manip ular esta propiedad css, y no simplemente mostrar u ocultar el elemento subyacente. No obstante, mencionaré que con jQuery

$("#yourUlId").toggle();

se alternará entre mostrar u ocultar este elemento.

Fuente

2011-12-10 03:17:01

-2

Puede hacerlo a través de JavaScript y DOM, pero realmente recomiendo aprender JQuery. Aquí hay una función que puede usar para alternar realmente ese objeto.

http://api.jquery.com/toggle/

EDIT: Adición del código real:

Solución:

fragmento HTML:

<a href="#" id="showAll" title="Show Tags">Show All Tags</a> 
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; "> 
    <li>Tag 1</li> 
    <li>Tag 2</li> 
    <li>Tag 3</li> 
    <li>Tag 4</li> 
    <li>Tag 5</li> 
</ul>

código Javascript usando jQuery desde la red de distribución de contenido de Google: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

$(function() { 
    $('#showAll').click(function(){ //Adds click event listener 
     $('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect. 
    }); 
});

Puede probar directamente desde este enlace: http://jsfiddle.net/vssJr/5/ Comentarios

adicionales en jQuery:

Alguien ha sugerido que el uso de jQuery para algo como esto está mal porque es un 50k Biblioteca . Tengo una fuerte opinión en contra de eso.

JQuery es ampliamente utilizado debido a las enormes ventajas que ofrece (como muchos otros marcos de JavaScript). Además, JQuery está alojado por Content Distribution Networks (CDN), como Google's CDN, que garantizará que la biblioteca se almacena en caché en el navegador del cliente. Tendrá un impacto mínimo en el cliente.

Además, con JQuery puede usar potentes selectores, agregar oyentes de eventos y usar funciones que en su mayoría están garantizadas como cross-browser.

Si es un principiante y quiere aprender Javascript, no descarte frameworks como JQuery. Hará tu vida mucho más fácil.

Fuente

2011-12-10 03:16:25 agarcian

Dar la UL una identificación y utilizar la función getElemenById:

<html> 
<body> 
    <script> 
    function toggledisplay(elementID) 
    { 
     (function(style) { 
      style.display = style.display === 'none' ? '' : 'none'; 
     })(document.getElementById(elementID).style); 
    } 
    </script> 

<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a> 
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; "> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

</body> 
</html>

Fuente

2011-12-10 03:36:37 marcocamejo

Esta es la forma recomendable y sensata de hacerlo y debe elegirse como la mejor respuesta. No necesita una biblioteca jQuery de 50K para hacer esto. – Rob

@Rob: ¿quién dijo que necesitabas una biblioteca jQuery de 50K para hacer esto? –

@AdamRackis - Todos los que sugirieron usar jQuery para hacer esto. – Rob

-3

Esto se puede hacer fácilmente mediante el uso de jQuery uso de la propiedad css ... prueba este: http://api.jquery.com/css/

Fuente

2011-12-10 04:25:48 kalpesh

Otros han respondido su pregunta a la perfección, pero pensé que podría tirar de otra manera. Siempre es una buena idea separar el marcado de HTML, el estilo de CSS y el código de JavaScript cuando sea posible. La forma más limpia de ocultar algo, con eso en mente, es usar una clase. Permite definir la definición de "ocultar" en el CSS al que pertenece. Con este método, más tarde puede decidir si quiere ocultar el ul desplazándose hacia arriba o desapareciendo usando CSS transition, todo ello sin cambiar su código HTML o código. Esto es más largo, pero creo que es una mejor solución general.

Demostración: http://jsfiddle.net/ThinkingStiff/RkQCF/

HTML:

<a id="showTags" href="#" title="Show Tags">Show All Tags</a> 
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>

CSS:

#subforms { 
    overflow-x: visible; 
    overflow-y: visible; 
} 

.hide { 
    display: none; 
}

Guión:

document.getElementById('showTags').addEventListener('click', function() { 
    document.getElementById('subforms').toggleClass('hide'); 
}, false); 

Element.prototype.toggleClass = function (className) { 
    if(this.className.split(' ').indexOf(className) == -1) { 
     this.className = (this.className + ' ' + className).trim(); 
    } else { 
     this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ').trim(); 
    }; 
};

Fuente

2011-12-10 06:26:24 ThinkingStiff

¿Qué pasa con 'document.getElementById ('# potato'). ClassList.toggle ('hide')' en lugar de crear un prototipo? – JeromeJ

@JeromeJ '.toggle()' no es una función de Javascript (hay un jQuery '.toggle()'). Además, '.getElementById()' no tomará notación hash (también jQuery). – ThinkingStiff

oups sobre el hash! Sin embargo, el '.toggle()' * DOES * existe en JavaScript (lo uso en mi sitio web) pero tiene el mismo efecto que 'toggleClass' de jQuery, por lo que no debe ser confundido con el '.toggle de jQuery () '. Opciones de jQuery a js: http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/ – JeromeJ

Alternar visualización: ninguno estilo con JavaScript

Respuesta

Cuestiones relacionadas