Toon posts:

[jQuery] div alleen toevoegen als die niet bestaat

Pagina: 1
Acties:

Onderwerpen


  • Bananenspin
  • Registratie: December 2008
  • Laatst online: 28-05 09:32
Ik heb me rot gezocht en geprobeerd maar het wilt me nog niet lukken. Ben geen jQuery specialist maar ik kan wel de docs lezen. Ik heb een horizontaal menu waarbij ik wil dat er maar bij een enkel menu kopje er ook een horizontaal submenu verschijnt. Dit heb ik dus met jQuery geprobeerd door middel van de volgende code.

code:
1
2
3
$('.klasnav').mouseover(function() {
$('#nav2').append('<a href="index.php">Home</a> :: <a href="nieuws.php">Nieuws</a>');
});


En dat werkt prima alleen ontstaat het probleem dat er bij elke mouseover dezelfde inhoud erbij komt. Ik heb toen geprobeerd om elke keer voordat de functie word aangeroepen de div #nav2 te verwijderen dmv .remove maar dan werkt de hele code niet meer. Ik heb daarna het volgende geprobeerd.

code:
1
2
3
4
$('.klasnav').mouseover(function() {
    if ($('#nav2').length == 0) {
    func2();
}});


Waarbij func2 de append code is, dit zou dus moeten kijken of hij bestaat, zo niet dan pas uitvoeren. Echter werkt het ook niet en zou ik niet weten wat ik fout doe of nog kan proberen, can anyone help me out?

HOI.


  • Beatboxx
  • Registratie: April 2010
  • Laatst online: 26-10-2022

Beatboxx

Certified n00b

Laat 'm weer removen als de muis weg gaat?

  • Bananenspin
  • Registratie: December 2008
  • Laatst online: 28-05 09:32
Het probleem is dan, dat je niet meer op het sub-menu kan drukken correct?

HOI.


  • RobIII
  • Registratie: December 2001
  • Laatst online: 23:10

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Waarom zou je 'm op mouseover appenden :? Waarom niet bij ondomready en dan bij mouseover gewoon visible maken en bij mouseout hiden. En nog beter: waarom überhaupt in jQuery en niet rechtstreeks in de HTML en dmv CSS verborgen en met jQuery visible maken/hiden? Dan hebben crawlers, non-JS browsers etc. er ook nog iets aan.

[Voor 11% gewijzigd door RobIII op 28-06-2011 22:38]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

Volgens mij bedoeld Bananenspin meer de code achter de functionaliteit via jQuery, niet het hele menu zelf.

  • RobIII
  • Registratie: December 2001
  • Laatst online: 23:10

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

CptChaos schreef op dinsdag 28 juni 2011 @ 22:52:
Volgens mij bedoeld Bananenspin meer de code achter de functionaliteit via jQuery, niet het hele menu zelf.
Ik bedoel juist: waarom zou je al die DOM operaties doen op een mouseover als die elementen met een simpele visibility-toggle ook getoond/verborgen kunnen worden. Moeilijk doen als 't makkelijk kan ;) Als Bananenspin een wat minder goed voorbeeld heeft verzonnen en een beter/concreter/eigenlijke_probleem voorbeeld heeft kunnen we daar ook, voor het daadwerkelijke probleem, waarschijnlijk een beter passende oplossing verzinnen beter in de juiste richting wijzen.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Bananenspin
  • Registratie: December 2008
  • Laatst online: 28-05 09:32
Het is voor mn examen project dus het hoeft van mij allemaal niet erg netjes, en ik heb er niet zoveel verstand van dat ik uberhaupt wist hoe het anders moet/kan. Ik snap het voordeel wel van het in het html zetten, ik ga nu even kijken naar het invisible maken en het toonbaar maken met jQuery.

HOI.


  • Bananenspin
  • Registratie: December 2008
  • Laatst online: 28-05 09:32
Ik heb het nu als volgt opgelost:

code:
1
2
3
4
5
6
7
8
9
$('.klasnav').mouseover(function() {
    $('#facnav').css('visibility', 'hidden');
    $('#klasnav').css('visibility', 'visible');
});

$('.facnav').mouseover(function() {
    $('#klasnav').css('visibility', 'hidden');
    $('#facnav').css('visibility', 'visible');
});


Waar de klasnav en facnav staan voor 2 menu kopjes die een submenu moeten hebben. Het kan waarschijnlijker een stuk netter, beter en slimmer maar goed het werkt. Ik doe geen mouseleave omdat zodra ik van de knop ga, het submenu dan verdwijnt.

HOI.


  • Manuel
  • Registratie: Maart 2008
  • Laatst online: 20:17
Wat je ook kunt doen is het volgende:
code:
1
2
3
4
5
6
7
8
9
10
11
12
$(".klasnav, .facnav").mouseover(function(e) {
    // Zie http://api.jquery.com/event.target/ voor de werking.
    if($(e.target).is(".klasnav")) {
        // Maak #klasnav zichtbaar en #facnav ontzichtbaar
        $("#klasnav").show();
        $("#facnav").hide();
    } else {
        // Maak #facnav zichtbaar en #klasnav ontzichtbaar
        $("#klasnav").hide();
        $("#facnav").show();
    }
});


Ik kies zelf vaak voor deze aanpak omdat het anders teveel copy-paste werk wordt terwijl je net zo goed van de target property gebruik kunt maken. :)

PS: Heb de code niet getest.
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee