login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Jquery toggle

Offline karel - 03/08/2015 19:49
Avatar van karelHTML interesse Hallo,
Ik heb op mijn website een Jquery toggle menu (linker kolom) in deze staan meerdere categorieën met elk links eronder. Standaard staan de categorieën gesloten doch wesn ik als je naar een link van een categorie gaat deze openstaat op de volgende pagina. Iemand raad ? In js kon ik deze code terug
vinden.
Plaatscode: 142464

12 antwoorden

Gesponsorde links
Offline Thomas - 03/08/2015 23:21
Avatar van Thomas Moderator Je zult dan - als je van pagina verandert - de toggle-functionaliteit moeten initialiseren zodat de categorie van de pagina opent. Dit doe je als de pagina wordt geladen. En daarbij moet je dus op een of andere manier een categorie kunnen identificeren. Geef je in de URL op een of andere manier door welke categorie je bekijkt?
Offline karel - 04/08/2015 06:38 (laatste wijziging 04/08/2015 06:38)
Avatar van karel HTML interesse Neen ik geef geen classe door, daar heb je wel een punt. Maar waar geef ik de classe aan, in de js pagina ?

Momenteel heb ik enkel dit staan

[toggle title="categorie1"]
<a title="link 1" href="http://www.">link 1</a>
<a title="link 2" href="http://www.">link 2</a>
<a title="link 3" href="http://www.">link 3</a>
[/toggle]
[toggle title="categorie2"]
<a title="link 1" href="http://www.">link 1</a>
<a title="link 2" href="http://www.">link 2</a>
<a title="link 3" href="http://www.">link 3</a>
[/toggle]
Offline Thomas - 04/08/2015 13:55
Avatar van Thomas Moderator Hoe luidt je specifieke URL? Is dit bijvoorbeeld categorie.htm?id=3? Maak je ook gebruik van een serverside scriptingtaal zoals bijvoorbeeld PHP? Dat zou het initialiseren mogelijk wel een stuk makkelijker maken.

Wat je moet initialiseren zul je wel op een of andere manier moeten kunnen afleiden uit je URL, hoe je dat vervolgens doet is vers twee. Als je geen manier hebt om een categorie aan te duiden in je URL weet je namelijk niet wat je standaard moet tonen...
Offline karel - 04/08/2015 19:51
Avatar van karel HTML interesse Hallo,

Zoals hierboven vermeld heb ik dit in de php pagina staan

[toggle title="categorie1"]
<a title="link 1" href="http://www.">link 1</a>
<a title="link 2" href="http://www.">link 2</a>
<a title="link 3" href="http://www.">link 3</a>
[/toggle]
[toggle title="categorie2"]
<a title="link 1" href="http://www.">link 1</a>
<a title="link 2" href="http://www.">link 2</a>
<a title="link 3" href="http://www.">link 3</a>
[/toggle]

In de JS pagina staat de code dat in mijn vorig bericht stond.
Offline Thomas - 04/08/2015 21:00
Avatar van Thomas Moderator Ik denk dat ik het niet begrijp, je zegt namelijk:

karel schreef:
Standaard staan de categorieën gesloten doch wesn ik als je naar een link van een categorie gaat deze openstaat op de volgende pagina.


Als je op een link klikt dan navigeer je weg van deze pagina? Maar waar ga je dan naartoe? Naar een soort van detailpagina van de link waar je op geklikt hebt? Het is een beetje koffiedik kijken zonder concreet voorbeeld maar voor die link geldt nog steeds hetzelfde: op een of andere manier moet daar uit blijken tot welke categorie deze detailpagina behoort.

Een alternatief (met een andere technische oplossing) is dat je nooit wegnavigeert van deze pagina maar de HTML van je detailpagina inlaadt (binnen haalt) op de huidige pagina via JavaScript. Maar dat concept wordt haast onmogelijk om uit te leggen laat staan te implementeren zonder een concreet voorbeeld van hoe jouw pagina's er uitzien en gestructureerd zijn. Ik zou deze oplossing ook pas kiezen als een andere (en eenvoudigere) variant niet mogelijk is.

Waarmee we weer min of meer terugkomen op mijn oorspronkelijke vraag/vragen:
- hoe zien je links er concreet uit, en zit hier een soort van categorie-identificatie in. href="http://www." zegt mij namelijk niet zoveel...
- navigeer je echt van pagina A (een overzichtspagina) naar pagina B (een detailpagina)?
- maak je gebruik van een serverside scriptingtaal, of bestaan je webpagina's enkel uit statische HTML?

Ik kan geen oplossing voorstellen of voorschotelen als je niet concreet uitlegt hoe je pagina's onderling in elkaar steken, daarvoor ontbreken er teveel puzzelstukken.
Bedankt door: Jointjeff
Offline karel - 07/08/2015 06:31 (laatste wijziging 07/08/2015 06:31)
Avatar van karel HTML interesse Kan je eens een kijke je nemen op deze pagine link naar website

Linker menu
Offline Jointjeff - 07/08/2015 09:50 (laatste wijziging 07/08/2015 11:15)
Avatar van Jointjeff HTML interesse Ik weet niet hoe je het het linker-menu nu beheert, maar je kan hier ook het speciale menu onderdeel in WordPress voor gebruiken.

https://codex.w...nus_Screen

Noem je menu bijvoorbeeld "Wat we doen" - vervolgens kun je die in je code oproepen.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2.  
  3. $defaults = array(
  4. 	'menu'            => 'wat-we-doen',
  5. 	'echo'            => true,
  6. 	'fallback_cb'     => 'wp_page_menu',
  7. 	'depth'           => 2
  8. );
  9.  
  10. wp_nav_menu( $defaults );
  11.  
  12. ?>

https://codex.w...p_nav_menu

Elk menu item krijgt nu automatisch de class 'current-menu-item' mee als deze actief is. Als een 'child-pagina' actief is krijgt de parent de 'current-menu-ancestor'-class mee.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. jQuery('.menu-wat-we-doen > li > a').click(function(){
  3.   $(this).parent('li').children('ul').slideToggle();
  4. });
  5. </script>


Nog wat CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu-wat-we-doen li ul {
  2.     display: none;
  3. }
  4.  
  5. .menu-wat-we-doen li.current-menu-item ul,
  6. .menu-wat-we-doen li.current-menu-ancestor ul {
  7.     display: block;
  8. }


Voorbeeld JS-Fiddle:
http://jsfiddle.net/r860e310/1/

-----------

Iets anders, je WordPress installatie is behoorlijk out-of-date. Ik raad je aan deze z.s.m. naar versie 4.2.4 bij te werken (jij gebruikt nu 3.4.2 welke in 2012 is uitgekomen!).
Offline karel - 08/08/2015 07:50 (laatste wijziging 08/08/2015 08:58)
Avatar van karel HTML interesse Hey,

De site is geupdated naar 4.2.4.

Bedankt voor de uitleg doch zie ik het probleem niet in mijn code ?

Kan je hier eens kijken ( https://jsfiddle.net/chakar/bf9mn25a/8/ ), dit is de code die ik heb. Zoals je kan zien is de toggle gesloten. Bedoeling is dat deze open is.
Offline Thomas - 08/08/2015 13:03
Avatar van Thomas Moderator Dat stukje code zorgt volgens mij enkel voor initialisatie:
- het verbergt alle element met klasse .box binnen elementen met klasse .toggle
oftewel, dit zorgt ervoor dat alle boxen worden ingeklapt

- het koppelt click-events aan elementen met de klasse .trigger binnen elementen met klasse .box
(je zou deze eerste en tweede stap dus ook samen kunnen nemen in één each())

Maar de actieve pagina wordt dus nog steeds niet onderscheiden van de rest. Daarom klapt deze dus ook niet automatisch uit. En dit kan ook niet, want er zit geen voorziening hiervoor in je code.

Begrijp je wat er gebeurt?

Zoals ik het zie moet je twee dingen doen:
1. Op een of andere manier zul je de categorie waarin de actieve pagina zit een extra klasse moeten geven ofzo (zeg "active"), dit zul je dan moeten doen in de code die het menu genereert

(extra: wellicht is het ook een idee om de actieve pagina er ook wat meer uit te laten springen in het menu, ook hiervoor zul je dan een klasse moeten toevoegen bij het pagina-item zelf)

2. bij het laden van de pagina in de initialisatie van het menu een derde stap toevoegen: klap het menu met de categorie met de eerdergenoemde toegevoegde klasse ("active") opnieuw uit

Daarnaast, als ik naar je site kijk lijkt het klikken op de links op dit moment geen effect te hebben?
Bedankt door: karel
Offline karel - 09/08/2015 07:14 (laatste wijziging 09/08/2015 10:15)
Avatar van karel HTML interesse Als je schrijft, het verbergt alle elementen bedoel je dan CSS of JS ?
De links werken terug.

Grrrr, al alles geprobeerd lukt niet

Offline Jointjeff - 09/08/2015 13:26
Avatar van Jointjeff HTML interesse Je kan ook de WordPress menu's gebruiken zoals in mijn voorbeeld. Actieve pagina's krijgen dan een class mee en op basis daarvan kun je zorgen dat het actieve menu openstaat.
Waarom probeer je dat niet?
Offline Thomas - 09/08/2015 14:03 (laatste wijziging 09/08/2015 15:45)
Avatar van Thomas Moderator @karel als alternatief zou je ook kunnen proberen wat Jointjeff aandraagt, dit is misschien ook beter, in die zin dat het meer in lijn is met hoe WordPress werkt (denk ik, ken het pakket verder niet echt inhoudelijk)

Waar ik schreef over het verbergen aan elementen refereerde ik aan je JSFiddle die je daarvoor aandroeg.

Dit is in feite wat er nu achtereenvolgens gebeurt:
- je pagina (HTML+CSS+JavaScript) wordt geladen, alle menu-items worden getoond
- na het laden van je pagina wordt er nog JavaScript uitgevoerd (voor de goede orde zou dit eigenlijk ook nog in een ready()-blok moeten staan), dit zorgt ervoor dat de detailpagina's worden verborgen en dat er click-events wordt gekoppeld aan de categorieën
...
en dan zul je nog iets bij moeten schrijven 

Ik zal met een voorbeeldscriptje laten zien wat ik eigenlijk bedoel, en ondertussen zou je Jointjeffs methode ook eens kunnen proberen.

EDIT: als elke link-click een page-refresh inhoudt, dan heb je eigenlijk helemaal geen javascript nodig? Je kunt dan bij de menu-opbouw al regelen wat je wilt tonen.
Bedankt door: karel
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s