index.html
<nav id="myNavbar">
<ul class="nav nav-pills nav-stacked ">
<li><a class="hide-when-blur" data-toggle="collapse" data-target = "#site-development">Разработка сайтов<span class="glyphicon glyphicon-menu-right navbar-right xs-no-element"></span></a>
</li>
</ul>
</nav>
<div class="collapse additional-bar" id="site-development">
<ul class=" relay-style grey-color">
<li><a href="#">пункт 1</a></li>
<li><a href="#">пункт 2</a></li>
<li><a href="#">пункт 3</a></li>
</ul></div>
script.js
var elements = document.querySelectorAll(".hide-when-blur");
for(var key in elements){
var item = elements[key];
if(typeof(item)==="object")
{
item.addEventListener("blur",function(){
console.log('blur works!!!');
})
};
}
Нужно чтобы при клике на на эл-т с классом hide-when-blur на экране появлялся блок с классом additional-bar(это обеспечивает bootstrap, срабатывает).
А после этого, при нажатии на другой эл-т страницы(потеря фокуса с текущего эл-та) блок additional-bar пропадал.
Так вот событие blur почему-то не срабатывает. Что нужно сделать?
P.S. цикл в скрипте нужен чтобы перебрать все эл-ты hide-when-blur