При ширине экрана <768 появляется кнопка
<!-- Collapsed Button-->
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
При клике по ней, выпадает меню
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="hidden-sm navbar-left">
<form class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default btn-form">
Искать
</button>
</form> <!-- /.navbar-form -->
</li>
<li class="visible-sm">
<a href="search.html" title="Search">
<span class="glyphicon glyphicon-search"></span>
</a>
</li>
<li class="active">
<a href="index.html">
<span class="glyphicon glyphicon-home hidden-xs"></span>
<span class="visible-xs">Главная</span>
</a>
</li>
<li class="visible-xs"><a href="shop-categories.html" title="Smartphones">Смартфоны</a></li>
<li class="visible-xs"><a href="#" title="Cameras">Камеры</a></li>
<li class="visible-xs"><a href="#" title="Accessories">Аксессуары</a></li>
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Каталог
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="shop-categories.html">Смартфоны</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Камеры</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Аксессуары</a></li>
</ul> <!-- /.dropdown-menu -->
</li> <!-- ./dropdown.hidden-xs -->
<li><a href="#">Скидки</a></li>
<li><a href="#">Обзоры</a></li>
<li class="">
<a href="#" data-toggle="modal" data-target="#login-modal" title="login.html">Войти</a>
</li>
<li class="phone">
<a href="tel:123-456-7890" title="PhoneNumber">
<span class="glyphicon glyphicon-earphone hidden-xs hidden-lg"></span>
<span class="visible-xs visible-lg">123-456-7890</span>
</a>
</li>
</ul> <!-- -->
</div> <!-- /.navbar.navbar-collapse-->
Хочу, чтобы после того, как пользователь кликнет в другой части экрана, выпадающее меню закрывалось.
Код javascript
$(function() {
// Custom JS
$("#navbarToggle").blur(function (event) {
var screenWidth = window.innerWidth;
if (innerWidth < 768) {
$("#navbar").collapse('hide');
}
});
});
Не работает.
