Je travaille sur un projet sur lequel j'ai commencé à construire bootstrap 4.0.0 . Au cours de ce projet, j’avais mis à jour bootstrap régulièrement chaque fois que les nouvelles versions (4.1.0, 4.1.3)) de bootstrap arrivaient et tout fonctionnait parfaitement jusqu'à ce que j'ai mis à jour vers bootstrap 4.2.1 à partir de là, j'ai rencontré une erreur dans la console lorsque je clique sur le document
DOMException Uncaught: Impossible d'exécuter 'querySelector' sur 'Document': 'javascript: void (0);' n'est pas un sélecteur valide.
J'ai compris que cela se produisait à cause de la liste déroulante à cause de cette erreur, la liste déroulante ne fonctionnait pas. J'ai également vérifié que, si j'utilise href = "javascript: void (0);" , href = "#!" L'erreur se produit, mais si j'utilise une balise d'ancrage sans href ou href = "#", cela fonctionne correctement.
Remarque: - J'ai besoin de la solution avec href = "javascript: void (0); comme href = "# dans le lien d'adresse n'a pas l'air joli et la page défile vers le haut
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="javascript:void();" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Voici mon codepen
Voici la solution qui fonctionne pour moi
Extrait de Bootstrap 4.1.3
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
selector = element.getAttribute('href') || '';
}
try {
return document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
},
Remplacez-le à partir de Bootstrap 4.2.1
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Merci à la solution PixemWeb github
Pour plus d'informations, cliquez sur le lien https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715
J'avais ce problème et un commentaire sur ce problème signalé m'a informé de la solution. Je copiais l'exemple à partir de Bootstrap docs, et je devais supprimer l'ID du lien parent et placer cet ID sur le conteneur des liens enfants, sans la propriété aria-Labelby et ajoutez une référence dans la propriété data-target du lien parent.
Cet exemple montre ce que je faisais, ce qui a causé les erreurs de la console:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
Commercial
</a>
<div class="dropdown-menu" aria-labelledby="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
C'est la solution qui a fonctionné pour moi:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Individual
</a>
<div class="dropdown-menu" id="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
Une suggestion:
Supprimez l'attribut vide href
et ajoutez cursor:pointer
style pour rendre un élément cliquable.
#dropdownMenuLink {
cursor: pointer; /* not necessary for Bootstrap */
color: white /* change if you want */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>
=== Changement dans bootstrap.js v4.2.1 ===
Trouvez le bloc ci-dessous
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Nécessité d'ajouter try et catch exception uniquement comme ci-dessous
Remplacer
return selector && document.querySelector(selector) ? selector : null;
avec
try {
return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
=== Modification dans bootstrap.min.js v4.2.1 ===
Remplacer
return e&&document.querySelector(e)?e:null
avec
try{return e&&document.querySelector(e)?e:null}catch(err){return null;}