[JS] jQuery toggle menu

[MonkeySleeve]

He allemaal,

Ik ben nu al enige tijd bezig om een menu te krijgen waarbij je op een <h3> klikt, er een submenu beneden komt. Dit kreeg ik wel werkend dmv een simpele functie in javascript, echter wil ik het graag met jQuery doen.

Dit is mijn html opmaak:

HTML:

<li class="pageItem">
<h3><a href="#" class="pageLink">Home<div class="arrow"></div></a></h3>
                        <div class="elementsPage"><!-- Begin elements Div -->
                            <ul class="elements">
                                <li><div class="dots"><a href="#">Element 1</a></div></li>
                                <li><div class="dots"><a href="#">Element 2</a></div></li>
                                <li><div class="dots"><a href="#">Element 3</a></div></li>
                                <li><div class="dots"><a href="#">Element 4</a></div></li>
                            </ul>
                        </div><!-- End elements Div -->
                    </li>

Nu wil ik dat wanneer ik op de class .pageLink klik, de div elementsPage inklapt. Dit kreeg ik eerst wel werkend maar dan was het zo dat alle classes(duh) met elementsPage inklapte...

Dit deed ik met dit stuk javascript:

JavaScript:

$(settings.page).mousedown(function (e) {
                    e.stopPropagation();    
                }).toggle(function () {
                    console.log($(settings.contentPageSelector));
                    
                    $(settings.page).parents(settings.widgetSelector).find(settings.contentSelector).hide();
                    $(settings.arrowPageElements).css({background: 'url(image/icons/arrowUp.png) no-repeat'});                                       
                    return false;
                },
                function () {
                    $(settings.page).parents(settings.widgetSelector).find(settings.contentSelector).show();
                    $(settings.arrowPageElements).css({background: 'url(image/icons/arrowDown.png) no-repeat'});  
                    return false;
                });

Ik weet dus niet hoe ik het voor elkaar moet krijgen dat alleen het stuk wordt uit/in geklapt van het element waar je op klikt...

[ Voor 0% gewijzigd door MueR op 17-03-2011 16:49 . Reden: Code tags met syntax highlighting ftw ]

[Reboot]

werken met nummers?

i=0 en voor ieder vak i+1 doen?

[ Voor 8% gewijzigd door Reboot op 17-03-2011 16:44 ]

[MonkeySleeve]

Mmmmh dat zou misschien kunnen werken, dat ik de class elementsPage, gewoon elementsPage1 noem en dan elementsPage2 etc.

Maar hoe doe ik dat dan in javascript dat het voor elk elementsPage geldt?

[moozzuzz]

ThE_OwNeR schreef op donderdag 17 maart 2011 @ 16:51:
Maar hoe doe ik dat dan in javascript dat het voor elk elementsPage geldt?

twee classes gebruiken:

HTML:

<div class="elementsPage element1"></div>

[MonkeySleeve]

moozzuzz schreef op donderdag 17 maart 2011 @ 17:15:
[...]

twee classes gebruiken:

HTML:

<div class="elementsPage element1"></div>

Ok, maar hoe in Javascript dan?

[MonkeySleeve]

Mmmmh ok, ik heb het ineens voor elkaar gekregen! Lukte zelfs zonder dat element1 te gebruiken:

code:

$(settings.contentSelector).hide();
        $(settings.page).mousedown(function (e) {
                    e.stopPropagation();    
                }).toggle(function () {
                    console.log($(this));                         
                    
                    $(this).parents(settings.pageItem).find(settings.contentSelector).show();
                    $(this).parents(settings.pageItem).find(settings.arrowPageElements).css({background: 'url(image/icons/arrowUp.png) no-repeat'});                                       
                    return false;
                },
                function () {
                    $(this).parents(settings.pageItem).find(settings.contentSelector).hide();
                    $(this).parents(settings.pageItem).find(settings.arrowPageElements).css({background: 'url(image/icons/arrowDown.png) no-repeat'});  
                    return false;
                }).prependTo($(settings.page,this));