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

Question

[b_efimenko]

Имеется 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 тоже использовал, не помогает

В общем подскажите как решить проблему, или дайте ссылку на статью где правильно описано как сделать меню с ховером

Comments

[YemSalat]

else не забыли?

[b_efimenko]

@YemSalat: и что мне там по вашему написать?

[YemSalat]

@b_efimenko: Ну попробуйте сами пройтись по логике вашего скрипта..

Answer 1

[IVAN SAVCHENKO]

Вопрос с 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;
    };
};

А вот специальный плагин для этих целей.

Answer 2

[Дмитрий Евграфович]

Потому что у вас скрипт инициализируется при больших разрешениях на старте, сделайте

$().on('hover', function(){
if($(window).width() > 767){}
})

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