Je crée une barre de navigation qui affiche un bouton lorsque la taille de l'écran est inférieure à une certaine largeur; comme vous l'avez vu avec de nombreux autres côtés Bootstrap. Lorsque le bouton est affiché et cliqué, les liens de navigation s'affichent dans une liste déroulante verticale, qui fonctionne comme prévu.La classe BootStrap "navbar-toggle" s'ouvrira, mais ne se fermera pas
Le problème survient lorsque j'essaie de fermer la liste déroulante en cliquant de nouveau sur le lien. Peu importe ce que je fais, il reste ouvert. Après avoir inspecté le site en ligne, il semble que la classe 'in' soit ajoutée au premier clic, mais pas supprimée lors des clics suivants (la fonction bascule). Je ne sais pas comment corriger cela, car je crois que mes liens sont corrects dans l'en-tête. Quelqu'un at-il une expérience avec ce problème?
EDIT: Comme clarification, je comprends que je pourrais écrire une solution de contournement dans mon document javascript, mais je ne veux pas aller dans ce sens s'il y a une solution plus évidente. Merci d'avoir aidé un débutant.
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js"> <!-- personal JS Script (Not Sure which is better) Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"> <!-- Font Awesome Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet"> <!-- Personal CSS Stylesheet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js"></script> <!-- Personal JS Script -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script> <!-- Bootstrap Script -->
<title><?echo get_bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="main contain">
<nav class="navbar navbar-inverse hold-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav-logo2" href="<?php echo get_bloginfo('wpurl'); ?>"></a>
</div>
<div class="collapse navbar-collapse pull-right header-text" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Marketing Campaigns</a></li>
<li><a href="#">Donor Activation</a></li>
<li><a href="#">Lobbying</a></li>
</ul>
</li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>