@b_efimenko

Как исправить в bootstrap меню проблему с hover?

Имеется bootstrap меню
<ul class="nav navbar-nav navbar-right">
									<li><a href="#">Главная</a><span>|</span></li> 
									<li class="dropdown">
										<a href="#" class="dropdown-toggle active" data-toggle="dropdown">Наши услуги</a><span>|</span>
										<ul class="dropdown-menu dropdown-menu-left">
											<li class="li-sub-dropdown">
												<div class="trian"></div>
												<a href="#">Создание адаптивных сайтов <span>>></span></a>
												<ul class="sub-dropdown-menu">
													<li><a href="#">Пункт1</a></li>
													<li><a href="#">Пункт2</a></li>
												</ul> 
											</li>
											<li><a href="#">Подпункт1</a></li>
											<li><a href="#">Подпункт2</a></li>
										</ul> 
									</li> 
									<li><a href="#">Портфолио</a><span>|</span></li>  
									<li><a href="#">О нас</a><span>|</span></li> 
									<li><a href="#">Блог</a><span>|</span></li> 
									<li><a href="#">Контакты</a></li>
								</ul>


Нужно было сделать что бы меню выпадало при наведении, а в мобильной версии все как и должно - по клику.

Написал такой скрипт:

if($(window).width() > 767){
        $('.dropdown').hover(function(){
            $('.dropdown-menu').css('display','block')
        },
        function(){
             $('.dropdown-menu').css('display','none')
         }
        )
        $('.li-sub-dropdown').hover(function(){
            $('.sub-dropdown-menu').css('display','block')
        },
        function(){
            $('.sub-dropdown-menu').css('display','none')
        })
     };


Все работает, но вот в чем проблема, когда я уменьшаю размер экрана до мобильного, при наведении на дроп меню оно появляется, а должно уже выпадать только по клику, но как только я обновлю страницу (сразу мобильная версия), то все работает, увеличиваю размер браузера до десктопа, тоже все работает (выпадает по наведению), опять уменьшаю до мобильной версии опять выпадает не по клику, а по наведению.
resize тоже использовал, не помогает

В общем подскажите как решить проблему, или дайте ссылку на статью где правильно описано как сделать меню с ховером
  • Вопрос задан
  • 6212 просмотров
Пригласить эксперта
Ответы на вопрос 2
gelevanog
@gelevanog
javascript developer
Вопрос с resize в браузере очень тонкий. Надо писать свой handler. Вот классический вариант подходящий для любых событий. Здесь представлено для resize
// отлавливает события resize
var handleResizeEvents = function() {
    var resizeLayout = debounce(_resizeEvents, 30);
    $(window).resize(resizeLayout);
}

// выполнятся через 30мс после resize 
var _resizeEvents = function() {
    // здесь функция ховера 
    if ($(window).width() > 767) {
        $('.dropdown').hover(function() {
                $('.dropdown-menu').css('display', 'block')
            },
            function() {
                $('.dropdown-menu').css('display', 'none')
            }
        )
        $('.li-sub-dropdown').hover(function() {
                $('.sub-dropdown-menu').css('display', 'block')
            },
            function() {
                $('.sub-dropdown-menu').css('display', 'none')
            })
    };
}

// Функционал следящий за событиями (взято из underscore.js)
// copyright undersore.js
var debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;
    return function() {
        context = this;
        args = arguments;
        timestamp = new Date();
        var later = function() {
            var last = (new Date()) - timestamp;
            if (last < wait) {
                timeout = setTimeout(later, wait - last);
            } else {
                timeout = null;
                if (!immediate) result = func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        if (callNow) result = func.apply(context, args);
        return result;
    };
};


А вот специальный плагин для этих целей.
Ответ написан
Комментировать
Потому что у вас скрипт инициализируется при больших разрешениях на старте, сделайте
$().on('hover', function(){
if($(window).width() > 767){}
})


И он будет проверять нормально. Вопрос не по теме - вам это точно нужно? Вы думаете много народу будет открывать ваш сайт в разрешении 767 и меньше с мышой в руке?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы