Attiva/disattiva visualizzazione: nessuno stile con JavaScript

Desidero modificare lo stile (seconda riga in basso) per rimuovere la parte display: none; quando l'utente fa clic sul collegamento "Mostra tutti i tag". Se l'utente fa clic di nuovo sul link "Mostra tutti i tag", ho bisogno del testo display: none; aggiunto all'istruzione "stile ...".Attiva/disattiva visualizzazione: nessuno stile con JavaScript

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

Ho cercato qui e Google per un esempio che posso applicare alla mia situazione. Ho trovato molti esempi usando 2 blocchi DIV per mostrare/nascondere. Ho davvero bisogno di farlo in questo modo, modificando l'elemento di stile html. Qualcuno ha un esempio (o fornisce un collegamento ad un esempio) che fa questo tipo di commutazione con il testo display: none.

fonte

2011-12-10 Josh Bond

Si sta utilizzando jQuery? – jQuerybeast

Lascia la tua ul un id,

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

quindi fare

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

SE stai usando jQuery, questo diventa:

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

Infine, hai detto specificamente che volevi manipolare ulate questa proprietà css, e non semplicemente mostrare o nascondere l'elemento sottostante. Tuttavia io detto che con jQuery

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

mostrerà alternativamente o nascondere questo elemento.

fonte

2011-12-10 03:17:01

-2

È possibile farlo tramite javascript diretto e DOM, ma consiglio davvero di imparare JQuery. Ecco una funzione che puoi utilizzare per attivare effettivamente quell'oggetto.

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

EDIT: Aggiunta del codice vero e proprio:

Soluzione:

frammento di codice 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>

codice Javascript utilizzando jQuery dalla rete di distribuzione di contenuti di 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. 
    }); 
});

È possibile verificare direttamente da questo link: http://jsfiddle.net/vssJr/5/

Ulteriori commenti su JQuery:

Qualcuno ha suggerito che l'uso di JQuery per qualcosa come questo è sbagliato, perché è un 50k Biblioteca . Ho una forte opinione contro questo.

JQuery è ampiamente utilizzato a causa degli enormi vantaggi che offre (come molti altri framework javascript). Inoltre, JQuery è ospitato da Content Distribution Network (CDN) come Google's CDN che garantisce che la libreria sia memorizzata nella cache nel browser del client. Avrà un impatto minimo sul cliente.

Inoltre, con JQuery è possibile utilizzare potenti selettori, aggiungendo listener di eventi e utilizzare funzioni per la maggior parte garantite per il cross-browser.

Se sei un principiante e vuoi imparare Javascript, ti preghiamo di non scartare quadri come JQuery. Renderà la tua vita molto più facile.

fonte

2011-12-10 03:16:25 agarcian

Dare il UL un ID e utilizzare la funzione getElementById:

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

fonte

2011-12-10 03:36:37 marcocamejo

Questo è il modo consigliato e ragionevole per farlo e dovrebbe essere scelto come miglior risposta. Non hai bisogno di una libreria jQuery 50K per farlo. – Rob

@Rob - chi ha detto che hai bisogno di una libreria jQuery 50K per fare questo? –

@AdamRackis - Tutti coloro che hanno suggerito di utilizzare jQuery per farlo. – Rob

-3

si può fare facilmente utilizzando jQuery utilizzando la proprietà css ... provare questo: http://api.jquery.com/css/

fonte

2011-12-10 04:25:48 kalpesh

Altri hanno risposto la tua domanda perfettamente, ma ho solo pensato di buttarla fuori in un altro modo. Quando è possibile, è sempre una buona idea separare il codice HTML, lo stile CSS e il codice javascript. Il modo più pulito per nascondere qualcosa, con questo in mente, è usare una classe. Permette di definire la definizione di "nascondi" nel CSS a cui appartiene. Utilizzando questo metodo, potresti decidere in seguito che lo ul si nasconda scorrendo in alto o in dissolvenza usando il CSS transition, il tutto senza modificare il codice HTML o il codice. Questo è più lungo, ma ritengo che sia una soluzione globale migliore.

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

Script:

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

fonte

2011-12-10 06:26:24 ThinkingStiff

Che dire di 'document.getElementById ('# potato'). ClassList.toggle ('nascondi')' invece di creare un prototipo? – JeromeJ

@JeromeJ '.toggle()' non è una funzione Javascript (esiste un jQuery '.toggle()'). Inoltre, '.getElementById()' non accetta la notazione hash (anche jQuery). – ThinkingStiff

oups sull'hash! Anche se, il '.toggle()' * DOES * esiste in JavaScript (lo uso sul mio sito web) ma ha lo stesso effetto ha 'toggleClass' da jQuery, quindi non deve essere confuso con' .toggle () '. jQuery alle alternative js: http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/ – JeromeJ

Attiva/disattiva visualizzazione: nessuno stile con JavaScript

risposta

Problemi correlati