Остановить e.preventdefault() в бутстрапе.

Веб-разработка. 07.09.2017

Как остановить e.preventdefault() в бутстрапе?

В бутстрапе, где есть субменю, переход по ссылке блокируется функцией e.preventdefault(), чтобы субменю можно было открывать по клику.

<li class="dropdown dropdown-submenu">
     <a class="dropdown-toggle" data-toggle="dropdown" href="link" title="category">category</a>
     <ul class="dropdown-menu">
          <li><a href="link">sub-category</a></li>
     </ul>
</li>

Для мобильных это отличное решение.

Но когда необходимо, чтобы на десктопах субменю разворачивалось по наведению курсора мыши, а при нажатии на пункт меню происходил переход по ссылке, вариант решения такой:

// css:
.dropdown-submenu:hover .dropdown-menu {
     display: block;
     opacity: 1;
}

// js:
if ( $ ( window ). width () > 1023 ) {
     $('.catalog_menu li a').click(function(e){
          var targetLink = $(this).attr('href');
          window.open(targetLink, '_self');
     });
}

Правда, есть планшеты с большим, чем 1023рх, размерами, и есть тач-десктопы. Поэтому корректнее подключать Modernizr.Touch.Events и задавать функцию в зависимости тач — не тач.

Метки: ,

Комментарии (0)

 

Читайте также: