jQuery omzetten naar puur Javascript
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();
});
});
// 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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
};
// 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?
Guido
Gewijzigd op 18/12/2018 11:28:03 door Guido -
Guido - op 18/12/2018 11:26:31:
Ik wil ... omzetten naar puur Javascript. ... kennis van Javascript zeer gering ...
Mijn eerste vraag is dan ... waarom wil je het omzetten?
Ik vind het overbodig om de gehele jQuery library in te laden voor een simpele functie zoals dit. Pageload enzo.
Guido
Maar ik kan me indenken dat je niet afhankelijk zou willen zijn van externe sites.
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?
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.
Gewijzigd op 18/12/2018 13:56:27 door - Ariën -
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.
Guido - op 18/12/2018 15:59:15:
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.
Gewijzigd op 18/12/2018 22:30:51 door Thomas van den Heuvel
Maar moet overigens wel concluderen dat de opbouw van het menu middels jQuery een flink stuk eenvoudiger is dan met puur Javascript.
Bedankt iedereen en fijne dagen.
Guido - op 24/12/2018 14:44:37:
Scheelt inladen van jQuery library.
Argumenten moet je niet tellen maar wegen :). Zoals waarschijnlijk al eerder aangehaald gebeurt dat slechts eenmalig.
Ben ik ook benieuwd naar de argumenten "waarom niet", ik bedoel, iedereen kan wel overal "waarom" bij plaatsen en dan moet je ook redenen hebben waarom iets op een bepaalde manier is aangepakt, maar dit "waarom" leek niet echt onderbouwd door de persoon die het vroeg, dus daar mag je dan ook meteen doorheen prikken.