Avatar billede dondy-kurt Nybegynder
17. august 2010 - 09:34 Der er 6 kommentarer og
1 løsning

jQuery hide-show

Jeg har en megadrop, der skal komme frem når jeg kører musen hen over menu punktet.

Dette er min JS kode:

$(document).ready(function(){

    $("#mainNavigation .toplevel").hover(function() {
        $(this).next(".mainNavMegadrop").animate({opacity: "show"}, 1);
    }, function() {
        $(this).next(".mainNavMegadrop").animate({opacity: "hide"}, 1);
    });

});


Og dette er min html kode:

<ul id="mainNavigation">
    <li class="toplevel">
        <div class="mainNavMegadrop"></div>
        <a href="/navitem2.aspx" title="Products" style="cursor:default;"></a>
    </li>
</ul>

Skal man bruge en <a> til at tage imod :hover'en ?
Avatar billede andreas13_fam Nybegynder
17. august 2010 - 10:17 #1
Nej.

Se gerne: http://api.jquery.com/hover/

Som der står er .hover en gennemvej for de 2 events mouseenter og mouseleave, og det kan derfor bruges på alle elementer.
Det skal bemærkes at mouseenter og mouseleave som native event kun understøttes i IE browser, men at jQuery benytter mouseout og mouseover til at lave noget der ligner mouseenter og mouseleave.

Desuden kan CSS pseudo klassen :hover også sættes på alle elementer, dog er det ikke alle browser der understøtter dette, mens alle browser vist nok understøtter :hover på anchor elementer.

Se eventuelt http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ omkring brug af css til dropdown menu

Håber det var forklaring nok.
Avatar billede dondy-kurt Nybegynder
17. august 2010 - 10:37 #2
Nej jeg synes desværre ikke at det gav så meget til mig :)

Jeg kan ikke bruge css til min dropdown, da der skal sættes en timerEvent på..

Jeg søger bare en omskrivning af mit allerede eksisterende JS kode :)
Avatar billede jokkejensen Novice
17. august 2010 - 10:55 #3
.Next() er til siblings
.Find() er til children

/J
Avatar billede dondy-kurt Nybegynder
17. august 2010 - 11:35 #4
Så du mener jeg kan løse det ved at skrive:

$(document).ready(function(){

    $("#mainNavigation .toplevel").hover(function() {
        $(this).find(".mainNavMegadrop").animate({opacity: "show"}, 1);
    }, function() {
        $(this).find(".mainNavMegadrop").animate({opacity: "hide"}, 1);
    });

});

?????
Avatar billede jokkejensen Novice
17. august 2010 - 12:03 #5
Nej jeg sagde bare du ikke kunne bruge .next() til at finde children, der kan stadig være mere galt, men du skriver jo ikke hvad der sker ?

Bare at det ikke virker?

/J
Avatar billede jokkejensen Novice
17. august 2010 - 12:05 #6
Der er jo heller ikke noget indhold i det div du vil vise, så det kan være svært at se om det kommer frem.

/J
Avatar billede dondy-kurt Nybegynder
17. august 2010 - 12:50 #7
Det er en mega drop der skal komme frem, og det er virkelig meget kode. jeg har forkortet det ned, så det er enkelt -Keep it simpe :)
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

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