MediaWiki:Common.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Asphyx (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
Asphyx (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
||
Zeile 7: | Zeile 7: | ||
var $header = $portal.find('#p-HOSTING-label'); | var $header = $portal.find('#p-HOSTING-label'); | ||
var $content = $portal.find('.vector-menu-content-list'); | var $content = $portal.find('.vector-menu-content-list'); | ||
var isOpen = | var isOpen = true; // Standardmäßig geöffnet | ||
// Debugging | // Debugging | ||
Zeile 14: | Zeile 14: | ||
console.log("Untermenüs:", $content.find('li').length); | console.log("Untermenüs:", $content.find('li').length); | ||
// Indikator hinzufügen ( | // Pfeil-Indikator hinzufügen (▼ für geöffnet) | ||
$header.prepend('<span class="menu-indicator"> | $header.prepend('<span class="menu-indicator">▼</span> '); | ||
// Styling für Header und Indikator | // Styling für Header und Indikator | ||
Zeile 21: | Zeile 21: | ||
'cursor': 'pointer', | 'cursor': 'pointer', | ||
'font-weight': 'bold', | 'font-weight': 'bold', | ||
'display': 'flex', | 'display': 'flex', | ||
'align-items': 'center' | 'align-items': 'center' | ||
}); | }); | ||
$header.find('.menu-indicator').css({ | $header.find('.menu-indicator').css({ | ||
'margin-right': '5px', | 'margin-right': '5px', | ||
'transition': 'transform 0. | 'transition': 'transform 0.3s ease' | ||
}); | }); | ||
// Inhalt standardmäßig | // Inhalt standardmäßig sichtbar (kein .hide()) | ||
$content. | $content.show(); // Explizit sichtbar machen | ||
// Klick-Event | // Klick-Event | ||
Zeile 36: | Zeile 36: | ||
e.preventDefault(); | e.preventDefault(); | ||
$content.slideToggle(300, function() { | $content.slideToggle(300, function() { | ||
isOpen = !isOpen; | isOpen = !isOpen; | ||
var $indicator = $header.find('.menu-indicator'); | var $indicator = $header.find('.menu-indicator'); | ||
if (isOpen) { | if (isOpen) { | ||
$indicator.text(' | $indicator.text('▼'); // Nach unten bei geöffnet | ||
$indicator.css('transform', 'rotate(0deg)'); | $indicator.css('transform', 'rotate(0deg)'); | ||
} else { | } else { | ||
$indicator.text(' | $indicator.text('▶'); // Nach rechts bei geschlossen | ||
$indicator.css('transform', 'rotate(0deg)'); | $indicator.css('transform', 'rotate(0deg)'); | ||
} | } | ||
}); | }); | ||
}); | }); | ||
}); | }); |
Version vom 30. März 2025, 11:02 Uhr
/* Das folgende JavaScript wird für alle Benutzer geladen. */
$(document).ready(function() {
console.log("Common.js wird geladen!");
// Ziel: Das HOSTING-Portal
var $portal = $('#p-HOSTING');
var $header = $portal.find('#p-HOSTING-label');
var $content = $portal.find('.vector-menu-content-list');
var isOpen = true; // Standardmäßig geöffnet
// Debugging
console.log("Portal gefunden:", $portal.length > 0 ? "Ja" : "Nein");
console.log("Header:", $header.text());
console.log("Untermenüs:", $content.find('li').length);
// Pfeil-Indikator hinzufügen (▼ für geöffnet)
$header.prepend('<span class="menu-indicator">▼</span> ');
// Styling für Header und Indikator
$header.css({
'cursor': 'pointer',
'font-weight': 'bold',
'display': 'flex',
'align-items': 'center'
});
$header.find('.menu-indicator').css({
'margin-right': '5px',
'transition': 'transform 0.3s ease'
});
// Inhalt standardmäßig sichtbar (kein .hide())
$content.show(); // Explizit sichtbar machen
// Klick-Event
$header.click(function(e) {
e.preventDefault();
$content.slideToggle(300, function() {
isOpen = !isOpen;
var $indicator = $header.find('.menu-indicator');
if (isOpen) {
$indicator.text('▼'); // Nach unten bei geöffnet
$indicator.css('transform', 'rotate(0deg)');
} else {
$indicator.text('▶'); // Nach rechts bei geschlossen
$indicator.css('transform', 'rotate(0deg)');
}
});
});
});