0

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

1 ответ 1

1

Нужно добавить атрибут href к ссылке

Вот ссылка на список элементов которые могут словить "фокус". У ссылок (anchor) есть атрибут "href" и методы "focus". ( механика работы скорее всего такая, что без атрибута "href" не можно вызвать "focus/blur").
Вот ссылка по семантике тега "а". В HTML 5 тег а без href валидный но считается как " represents a placeholder " т.е. вы не можете нажать на него (активные элементы меню или хлебные крошки). А если элемент не предполагает нажатие, то и фокус на нем не нужен.

2
  • Помогло, не совсем понятно почему, но сработало, спасибо. Возможно есть ресурс где можно узнать почему так? 10 мар 2018 в 12:15
  • дополнил ответ.
    – slowBro
    10 мар 2018 в 13:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.