Door
Guido -
op 18-12-2018 11:26
gewijzigd op 18-12-2018 11:28
2.121 views
Hallo,
Ik wil mijn jQuery aangedreven website-menu omzetten naar puur Javascript. Maar omdat mijn kennis van Javascript zeer gering is, kom ik er helaas niet uit.
jQuery:
jQuery(document).ready(function($) {
// Hide mobile menu by default
$('#mobile-nav').hide();
// Display mobile menu when clicked
$( "#mobile-nav-toggle" ).click(function() {
$( "#mobile-nav" ).toggle();
});
// Hide mobile submenu by default
$(''#sub-menu').hide();
// Add toggle that displays mobile submenu
var subnavToggle = $( '<button />', { 'id': 'subnav-toggle' })
.append( "+" );
$( "#mobile-nav" ).find( '#menu-item-has-children > a, #page_item_has_children > a' ).after( subnavToggle );
// Display mobile submenu when clicked
$( "#subnav-toggle" ).click(function() {
$(this).next('#sub-menu').toggle();
});
});
Puur Javascript:
function nav {
// Hide mobile menu by default
document.getElementById('mobile-nav').style.display = 'none';
// Display mobile menu when clicked
document.getElementById('mobile-nav-toggle').addEventListener("click", function() {
document.getElementById('mobile-nav').style.display = 'block';
});
// Hide mobile submenu by default
document.getElementById('submenu').style.display = 'none';
// Add toggle that displays mobile submenu
// Display mobile submenu when clicked
};
Verder als dit kom ik helaas niet. Wie kan me verder helpen hiermee?
Ergens snap ik je wel, maar tegenwoordig (zeker in Nederland) zijn de verbindingen snel.
Als je jQuery gebruikt heb je wel de (redelijke) zekerheid dat het in iedere browser werkt (cross-compatibility) en dat heb je met plain javascript niet. Misschien iets om in overweging te nemen?
Alle hedendaagse browsers ondersteunen Javascript toch volledig? Dat ik heel oude versies van bijvoorbeeld IE niet ondersteun, boeit me niet. Ik wil graag een lichte website, en vind jQuery hiervoor gebruiken niet in verhouding staan met wat je hiervoor moet inladen.
Er zijn browsers, zoals Safari die wel eens nukkig kunnen zijn.
Het gebruik van jQuery ligt er ook een beetje aan of je het nodig hebt. Als je bijvoorbeeld al de Bootstrap gebruikt, is het handig om jQuery ook voor je eigen frutsels te gebruiken.
Het nut/doel van jQuery is enerzijds makkelijker programmeren en anderzijds cross-browser compatibility. Ja, alle browsers ondersteunen javascript, maar (zover ik weet) zijn er wel verschillen dat in de ene browser iets niet werkt en in de andere wel. In hoeverre dat vandaag de dag nog aan de orde is weet ik niet. Maar met jQuery heb je daar als het goed is geen last van.
Ik begrijp uit jullie reacties dat jullie in dit geval tóch voor jQuery zouden kiezen? Ik wil gewoon jQuery voorkomen als het ook anders kan.. en dat is hier het geval. Het zou anders zijn als andere delen van mijn website van jQuery afhankelijk zouden zijn.
De reden die jij noemt is valide. Er is in dit geval geen goed of fout. Jij moet alleen voor jezelf nagaan of jouw 'puur' javascript-oplossing solide genoeg is om in alle browsers te kunnen werken. Als jij daarvan overtuigd bent, dan zou ik zeggen ga ervoor. Maar zo niet, zou ik het bij jQuery houden. De library laadt hij overigens maar 1 keer per sessie in, en daarna haalt ie 'm uit de cache van de browser. Ik verwacht dus niet dat je echt super veel snelheidswinst zult gaan boeken.
Het zou anders zijn als andere delen van mijn website van jQuery afhankelijk zouden zijn.
Wat niet is kan nog komen?
Het "waarom" zou je voorop moeten stellen aan het "wat". Waarom de wens om terug te gaan naar native JavaScript met dus mogelijk het cross-browser vangnet wat dan wegvalt?
Je site wordt er niet trager door. Na 1x inladen worden JavaScript- en CSS-bestanden gecached.
Bandbreedte is niet echt een issue meer tegenwoordig.
De minified variant is ook niet groot.
Het is ook geen obscuur stuk code maar een breed ondersteunde library.
Als het enige argument "voor de vorm" is, waarom moeilijk doen als het makkelijk kan.
Als het argument is "omdat iemand dit niet wil", mag 'ie ook uitleggen waarom.
