Hallo,
also vorweg: ich bin ein Typoscript-Neuling, also bitte langsam und deutlich sprechen 😉
Ich habe folgendes Problem:
Ich sollte ein bestehendes Menü zu einem Accordion (mit jQuery) umbauen, so weit, so gut...
Die Menüstruktur gestaltet sich so:
|-Punkt 1
|---Punkt 1.1
|---Punkt 1.2
|-Punkt 2
|---Punkt 2.1
|---Punkt 2.2
etc. und bei Klicks auf die Hauptpunkte sollen die entsprechenden Unterpunkte ausfahren und ggf. andere bereits ausgefahrene zusammenklappen - Accordion eben 🙂
Das jQuery Script, das ich verwende, sieht so aus:
<script language="javascript">
$(document).ready(function() {
$('div.demo-show2> div').hide();
$('div.demo-show2> h3').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
und das TS für dieses Menü so:
lib.menuleft = HMENU
lib.menuleft {
special = directory
special.value = 20
entryLevel = 1
wrap = <div class="demo-show2">|</div>
1 = GMENU
1 {
expAll = 1
NO = 1
NO {
XY = 185,35
transparentBackground = 1
backColor = #ffffff
transparentColor = #ffffff
wrap = <h3 class="inactive">|</h3>
5 = IMAGE
5.file = fileadmin/templates/images/submenu_trenner.png
5.offset = 5,32
10 = TEXT
10 {
text.field = title
fontColor = #82bd2b
fontFile = fileadmin/fonts/segoeprb.ttf
fontSize = 18
niceText = 1
offset = 5,25
}
}
RO < .NO
RO {
10 = TEXT
10 {
fontColor = #3c92ad
}
}
CUR < .RO
CUR {
wrap = <h3 class="active">|</h3>
5.file = none
}
ACTIFSUB < .CUR
}
2 = GMENU
2 {
NO = 2
wrap = <div>|</div>
NO {
XY = 185,20+[16.h]
transparentBackground = 1
backColor = #ffffff
transparentColor = #ffffff
# Text auf den Menüpunkt rendern
10 = TEXT
10 {
text.field = title
text.listNum = 0
text.listNum.splitChar = |
fontColor = #82bd2b
fontFile = fileadmin/fonts/segoeprb.ttf
fontSize = 14
niceText = 1
offset = 25,14
}
# Eine ggf. vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 25,30
# Hilfsebene zur Berechnung der Höhe von Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.offset = 1000,1000
20 = IMAGE
20.file = fileadmin/templates/images/submenu_no.png
20.offset = 14,5
}
CUR < .NO
CUR {
10 = TEXT
10 {
fontColor = #3c92ad
}
15 {
fontColor = #3c92ad
}
}
RO < .CUR
}
}
# Include the JS and CSS files
#page.includeCSS.file7 = EXT:rgaccordion/res/menu/menu.css
#page.includeJS.file1 = EXT:rgaccordion/res/menu/mootools.js
#page.includeJS.file2 = EXT:rgaccordion/res/menu/menu.js
Das funktioniert soweit auch gut, aber ein "kleines" Problem habe ich noch: das derzeit aktive Untermenü sollte ausgefahren bleiben. Ich dachte mir, am besten ginge das, wenn ich das Javascript so ändere:
<script language="javascript">
$(document).ready(function() {
$('div.demo-show2> div.inactive').hide();
$('div.demo-show2> h3').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
dazu müsste ich dann "nur noch" TypoScript dazu bringen, dass dem div, das das Untermenü (2) umschliesst, eine Klasse "inactive" bei nicht aktiven bzw. "active" bei aktiven Punkten zugewiesen wird - leider habe ich keine Ahnung, wie ich das machen sollte?
Vielen, vielen Dank schon mal für Eure Hilfe!