Avatar billede patrickreck Nybegynder
22. oktober 2011 - 13:50 Der er 1 kommentar og
1 løsning

JQuery begynder

Hejsa. Jeg er lige startet på noget javascript og jquery, og forstår ikke helt hvorfor dette script jeg har fået sat sammen ikke virker. Når man klikker første gang vil den gerne åbne paragraffen, men anden gang man klikker lukker den ikke.

<script>
$(function() {
    $('#main p').css({"display" : "none"});
   
    $('#main a.expand').click(function() {
        $('#main p').slideDown(400);
        $('a.expand').removeClass('expand').addClass('close');
    });
   
    $('#main a.close').click(function() {
        $('#main p').css({"display" : "none"});
    });

})
</script>

<style>
.expand {
    font-weight: bold;
}
.close {
    color: red;   
}
</style>

<div id="main">
    <h1>Lorem Ipsum</h1><a href="#" class="expand">Åben</a>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Jeg har fjernet de overflødige tags (body osv.) for øjets skyld.
Avatar billede patrickreck Nybegynder
22. oktober 2011 - 14:48 #1
Har nu også prøvet med følgende som heller ikke fungerer:

<script>
$(function() {
    $('#main p').css({"display" : "none"});

    var vis = 1;
   
    if (vis == 1) {   
        $('#main #aaben').click(function() {
            $('#main p').slideDown(400);
            vis = 0;
        });
    }
   
    if (vis == 0) {
        $('#main #aaben').click(function() {
            $('#main p').slideUp(400);
            vis = 1;
        });
    }
})
</script>
Avatar billede patrickreck Nybegynder
22. oktober 2011 - 15:26 #2
Fik det til at fungere :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>
<script type="text/javascript" src="jquery.js"></script>

<script>

$(function() {
    $('#indhold').css({"display" : "none"});
    $('#luk').css({"display" : "none"});

    $('#aaben').click(function() {
        $('#indhold').slideDown(400);
        $('#aaben').css({"display" : "none"});
        $('#luk').css({"display" : "inline"});
    });

    $('#luk').click(function() {
        $('#indhold').slideUp(400);
        $('#luk').css({"display" : "none"});
        $('#aaben').css({"display" : "inline"});
    });
})

</script>

</head>

<body>

<div id="main">
    <h1>Lorem Ipsum</h1><a href="#" id="aaben">Åben</a> <a href="#" id="luk">Luk</a>
    <p id="indhold">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester