Hoi. Ik ben, zoals je je misschien nog kan herinneren blind. de JSfiddle app is, net als gelijkaardige platforms, volledig ontoegankelijk voor schermlezers.
Hier heb je wel de code die in een gewoon .html bestand zou moeten werken:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSAdres</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row"><header class="page-header">
<div class="col-md-9">
<div class="btn-group">
<button class="btn btn-primary" id="new-contact">Nieuw contact toevoegen</button>
<button class="btn btn-warning" id="settings">Instellingen (voor experts)</button>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">?</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="help-guide">Handleiding</a>
<a href="#" class="dropdown-item" id="help-shortcuts">Sneltoetsen</a>
<a href="#" class="dropdown-item" id="help-about">Over...</a>
</div>
<!-- end dropdown div -->
</div>
<!-- End btn-group div -->
</div>
<!-- End col div -->
</div>
<div class="col-md-3">
<form class="form-inline">
<div class="form-group">
<label for="searchbox">Zoek een contact</label>
<input type="text" name="searchbox" id="searchbox">
<button class="btn btn-success" id="searchbtn">Zoeken</button>
</div>
</form>
<!-- End col div -->
</div></header>
<!-- End row div -->
</div>
<div class="row">
<div class="col-md-12">
<p tabindex="0">Dit is de plaats waar later de contacten gaan komen.</p>
<!-- End col div -->
</div>
<!-- End row div -->
</div>
<!-- End container div -->
</div>
</body>
</html>
Ik heb alleen de link- en scripttags veranderd naar CDN's.
Wat bedoel je met "werkend voorbeeld"? als je de grote lap code die ik net stuurde in een kladblok plakt en dat als .html opslaat, werkt het.
Ik ben een app aan eht ontwikkelen mbt electron.
Wel, ik heb jquery en popper.js geïnstalleerd aan de hand van NPM en bootstrap met Bower.
Dan heb ik gezorgd dat alle foutmeldingen wegwaren en ik heb niets meer dan wat ik al bescreef. Ik heb dus géén foutmeldingen en de rest van het probleem is onveranderd gebleven (zie oorspronkelijke post)
PS: Ik gebruik geen echte browser, want ik ben aan het werken met Electron.
Misschien te kort door de bocht, maar in het eerste voorbeeld wat ik openklik nadat ik zoek op "boostrap dropdown" wordt via een aria-attribuut een verband gelegd tussen de knop waar je op klikt en de menu-items die getoond zouden moeten worden, misschien ontbreekt dat verband in jouw code? M.a.w. hoe weet jouw code dat de opties uit de subdiv met klasse "dropdown-menu" moeten komen? Er moet op een of andere manier een verband worden gelegd waarop de popper/bootstrap functionaliteit acteert nietwaar?
