Come avviare i javery come nascosto?

Ho un codice che mostra tre immagini e un rispettivo div sotto ogni immagine. Usando la funzione jquery .toggle, l'ho fatto in modo che ogni div si commutasse quando si fa clic sull'immagine sopra di essa. C'è un modo per farlo in modo che i div partiscano come nascosti?Come avviare i javery come nascosto?

Grazie per il vostro tempo,

CODICE DI RIFERIMENTO:

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#picOne").click(function(){ 
$("#one").toggle(250); 


}); 

$("#picTwo").click(function(){ 
    $("#two").toggle(250); 
    }); 


    $("#picThree").click(function(){ 
    $("#three").toggle(250); 
    }); 

}); 
</script> 
</head> 

<body> 


    <center> 
    <h2>Smooth Transitions</h2> 


    <img src="one.png" id="picOne"> 
     <div id="one"> 
     <p>first paragraph.</p> 
     </div> 

    <img src="two.png" id="picTwo"> 

     <div id="two" visibility="hidden"> 
     <p>Second Pair of giraffe.</p> 
     </div> 


    <img src="three.png" id="picThree"> 

     <div id="three"> 
     <p>Thiird paragraph.</p> 
     </div> 



</center> 
</body> 
</html>

fonte

2011-12-27 John

visibility è un css proprietà. Ma display è ciò che si desidera in ogni caso

<div id="two" style="display:none;"> 
    <p>Second Pair of giraffe.</p> 
</div>

O fosso il CSS in linea e dare ad ogni div ad essere attivata una classe CSS

<div id="two" class="initiallyHidden">

e poi

.initiallyHidden { display: none; }

E puoi anche ripulire un po 'il tuo jQuery. Lascia la tua immagini ginocchiera che causano una classe CSS

<img src="one.png" class="toggler"> 
    <div> 
    <p>first paragraph.</p> 
    </div>

E poi

$("img.toggler").click(function(){ 
    $(this).next().toggle(250); 
});

Ciò eviterebbe il vostro bisogno di tutti gli ID, e inoltre renderebbe questa soluzione molto, molto di più estensibile.

E per gestire contenuti aggiunti in modo dinamico, è possibile utilizzare on invece di click

$(document).on("click", "img.toggler", function(){ 
    $(this).next().toggle(250); 
});

(e per migliorare le prestazioni, assicurarsi che tutte queste immagini non girevoli sono in qualche div contenitore, chiamato, per esempio, containerFoo, poi fare $("#containerFoo").on invece di $(document).on(

fonte

2011-12-27 18:37:32

Ho amato la parte di ripulire il mio jQuery! Per maggiore flessibilità puoi invece utilizzare un attr di dati nel toggler, come 'data-toggles-element:" div-id "'. – nitsas

con i CSS:

#one, #two, #three { display: none; }

con jQuery

$(function() { //once the document is ready 
    $('h2').nextAll('img') //select all imgs following the h2 
    .find('div') //select all contained divs 
    .hide(); 
})

A proposito, invece di usare i selettori id probabilmente si dovrebbe utilizzare le classi

fonte

2011-12-27 18:39:55

+1 per CSS e suggerimenti di classe. – MetalFrog

Basta aggiungere style="display: none;" al div. Questo avvierà la classe div come nascosta.

Quando il jQuery alterna il blocco, lo stile sarà poi cambiato per bloccare

fonte

2016-08-20 03:50:21

Come avviare i javery come nascosto?

risposta

Problemi correlati