Vraagje over jQuery?

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function){
     $("#listitem1").click(function){
	     $("#listitem2").toggle();
} 
}    
</script>
</head>
<body>
<div id="listitem1">
</li>
<div id="listitem2">
</div>
</body>
</html>
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
margin: 0;
}
p {
margin: 0;
}
#listitem1 {
margin: 0;
width: 100%;
height: 100px;
background: #999;
}
#listitem2 {
margin: 0;
width: 100%;
height: 100px;
background: #000;
}
Dit is een HTML (met Javascript en jQuery erin) en een CSS bestand.
Ik wil dat als ik op #listitem1 klik dat dan #listitem2 weggaat en als ik dan nog een keer op #listitem1 klik dat #listitem2 dan weer terugkomt.
Dit wil ik doen met jQuery, maar het lukt niet echt.
Heeft dit misschien te maken met dat je jQuery moet downloaden op je server en je het niet offline kan doen? Of is de code gewoon niet goed?
 
Laatst bewerkt door een moderator:
Je gebruikt een externe link voor het inladen van de jQuery bibliotheek, dus dat verhaal over het downloaden gaat niet op.

Ten eerste klopt je HTML niet, je sluit de div van #listitem1 af met een </li>.

Verder zit je jQuery niet goed, wanneer je een functie gebruikt met een callback (een functie die uitgevoerd wordt) hoor je die zo te schrijven:
[js]
$(document).ready(function ()
{
// Wat er moet worden uitgevoerd
});
[/js]

Let vooral op de haakjes, zowel bij de .ready() als de .click() doe je het verkeerd.

Een functie is altijd naam();, als er iets aan die functie meegegeven kan worden dan vul je dat tussen de haakjes in, gescheiden door komma's: naam(voornaam, achternaam);.

In dit geval geef je een callback mee, een functie die uitgevoerd gaat worden. Een functie declaratie ziet er zo uit:
[js]
function naam()
{
// Dit wordt uitgevoerd;
}
// of anders geschreven:
var naam = function()
{
// Dit wordt uitgevoerd
};
// Met parameters
function naam(voornaam, achternaam)
{
document.write(voornaam +' '+ achternaam);
}
[/js]
Als dus de parameter een functie is moet je die ook juist declareren:
[js]
$(document).ready(function()
{
// Dit wordt uitgevoerd
} //Accolade sluiten voor functie-declaratie
); // Haakje sluiten voor einde functie en ; voor einde regel
[/js]
Dit is de werkende code:
[js]
$(document).ready(function()
{
$("#listitem1").click(function()
{
$("#listitem2").toggle();
});
});
[/js]
http://jsfiddle.net/wP6L7/
 
Laatst bewerkt:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
     $("#listitem2").hide();
})



$(document).ready(function(){
    $("#listitem1").click(function(){
        $("#listitem2").toggle(1000);
    });
});   
</script>
</head>
<body>
<div id="listitem1">List Item 1
</div>
<div id="listitem2">
</div>
<div id="listitem3">List Item 3
</div>
<div id="listitem4">
</div>
</body>
</html>
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
margin: 0;
}
p {
margin: 0;
}
#listitem1, #listitem3{
margin: 0;
width: 100%;
height: 100px;
background: #999;
}
#listitem2, #listitem4 {
margin: 0;
width: 100%;
height: 100px;
background: #000;
}
Ik heb het HTML en CSS bestand nu uitgebreid.
Hoe zorg ik er nu voor dat als ik op #listitem3 klik dat dan #listitem4 'toggelt'?

Ik had al dit geprobeerd maar dat hielp niet:
[js]
$(document).ready(function(){
$("#listitem1", "listitem3").click(function(){
$("#listitem2", "#listitem4").toggle(1000);
});
});[/js]
 
Laatst bewerkt door een moderator:
Op de link "Bericht aanpassen" klikken bij je bericht en dan voor je code
HTML: 
[/noparse] zetten en aan het einde afsluiten met [noparse]
 (Of [js] voor Javascript,
Code: 
 voor CSS, [php] voor PHP)[/color]

Met betrekking tot je vraag: Als je meerdere elementen wilt selecteren is het handiger over de structuur na te gaan denken.

Als je er gewoon een lijst van maakt dan kun je bijvoorbeeld gebruik maken van de selector [URL="http://api.jquery.com/even-selector/"][FONT=Courier New]:even[/FONT][/URL].

[html]<ul class="blocks">
    <li>Block 1</li>
    <li>Block 2</li>
    <li>Block 3</li>
    <li>Block 4</li>
</ul>
[/html]
[code].blocks li {
margin: 0;
width: 100%;
height: 100px;
background: #999;
}
[js]$(document).ready(function()
{
$(".blocks li:even").click(function()
{
$(this).next().toggle();
});
});
[/js]
http://jsfiddle.net/wP6L7/1/

Echter lijkt dit gedrag aardig op de accordion-functionaliteit welke in jQuery UI zit: http://jqueryui.com/accordion/
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan