слайдов не остаются открытыми

Question

$('span.nav-btn').click(function() { 
     $('ul#menu').slideToggle(); 
    }) 
$(window).resize(function() { 
    if ($(window).width() > 900) { 
     $('ul#menu').removeAttr('style') 
    } 
}); 

$('span.sub-btn').click(function() { 
     $('ul#sub').slideToggle(); 
     $(this).toggleClass('active'); return ('false'); 
    }) 

$(window).resize(function() { 
    if ($(window).width() > 900) { 
     $('ul#sub').removeAttr('style') 
    } 
}); 

http://codepen.io/anon/pen/Hnhea

когда браузер ширина уменьшено до 900px или так, внутри «MENU», когда продукт & службы щелкнул сценарий все еще работает, но когда мышь проходит над другое место, подменю скрыто и делает его похожим на: hover.

Есть ли у кого-то решение, как сделать подменю все еще отображаться, даже мышь была в другом месте ???

спасибо.

Answer 1

Вам просто нужно отделить свои правила стиля для разных видовых экранов.

См http://codepen.io/anon/pen/pFtuh

Вы, очевидно, должны привести в порядок его.

Например *:

#menu ul { 
    /*opacity: 0;*/ 
    /*visibility: hidden;*/ 
    display: none; 
} 

#menu li:hover > ul { 
    display: block; 
    /*opacity: 1;*/ 
    /*visibility: visible;*/ 
} 

@media screen and (max-width:900px) { 
    #menu ul { 
    position: relative; 
    ... 
    } 
    #menu li:hover > ul { 
    display: none; 
    } 
... 

* Единственные изменения, которые были сделаны.

Когда выпадающее меню находится в мобильном окне просмотра, вы не хотите наведения. Вы также хотите относить положение, когда находитесь в мобильном видовом экране.