почему не срабатывает событие blur в bootstrap?

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