My JQuery function doesn't seem to be working as expected. Sometimes when I click on the elements, nothing happens and it triggers a function that hides the collapsible menu if clicking anywhere on the document instead of redirecting to the correct href's. Are there better methods to achieve this?
HTML
<div>
<button id="bottone" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav " aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about_me">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.php">Contacts</a>
</li>
</ul>
</div>
</div>
JQuery
$(document).ready(function () {
$("#bottone").blur(function (event) {
var screenWidth = window.innerWidth;
if (screenWidth < 768) {
$("#navbarNav").collapse('hide');
}
});
});