SlideToggle меню навигации исчезают слишком быстро

у меня есть эта функция slidetoggle. но с добавлением, меню появляется, а затем исчезает слишком быстро, я хочу, чтобы он отображался как стандартное раскрывающееся меню навигации.SlideToggle меню навигации исчезают слишком быстро

вот мой CSS для запросов СМИ:

@media screen and (max-width: 480px) { 
.menu-trigger{ /*displays menu-trigger as a block but only when max-width is 
hit */ 
display: block; 
color: white; 
background-color: #5978cf; 
padding: 10px; 
text-align: left; 
font-size: 83%; 
cursor: pointer; 
} 

div.nav-menu{ /*hides nav-menu when under 480px */ 
display: none; 
} 

.div.nav-expanded{ 
display: block; 
} 

div.nav-menu ul li { 
float: none; 
border-bottom: 2px solid #d5dce4; 
} 

div.nav-menu ul li:last-child{ 
border-bottom: none; 
} 
} 
.clearfix:before, .clearfix:after{ 
content: ""; 
display: table; 
} 
.clearfix:after { 
clear:both; 
} 
.clearfix{ 
*zoom:1; 
}

я думаю, что его делать с «400», но я видел статьи и видео этого процесса, и все они, кажется, работают, так что не понять, почему мой нет.

источник

2016-10-14 Tom Thorpe

'400' это число миллисекунд анимации требуется, чтобы закончить. Если вы хотите замедлить его, сделайте число больше –

, я установил цифру в 1500, поэтому меню медленнее отображает ... но я думаю, что когда он достиг 1500, меню исчезает .. в то время как некоторые примеры, которые я видел, показывают в меню на 400, и меню отображается некоторое время после его полной загрузки (предполагая, что оно остается пока отображаемым до другого щелчка), любые идеи, как я это делаю? –

вместо jquery i, который был выше, я изменил его на: $ (document) .ready (function() { $ ('. Menu-trigger'). Click (function() { \t $ ('. nav-menu '). slideToggle ("fast"); }); }); , но если я добавлю: $ (this) .toggleClass ("nav-extended"). Css ('display', ''); ПОСЛЕ \t $ ('. Nav-menu'). SlideToggle («fast» { , когда экран больше, чем медиа-запросы, я возвращаю навигационное меню, но мой мобильный навигатор не работает? Я нажимаю, но ничего не происходит. –

Вы удаляете настройку дисплея, которая устанавливает jQuerys slideToggle(), поэтому меню скрывается. Удалите это из кода, и он должен работать нормально.

Следующая проблема, с которой вы сталкиваетесь, - это ваш css. Рассмотрим «мобильный первый» подход, как в этом примере, чтобы избежать таких проблем.

В этом примере на экране шириной более 480 пикселей отображается «МЕНЮ WRAPPER», пока «кнопка» скрыта в окне уже, кнопка отображается и переключает меню.

jQuery(document).ready(function(){ 
 
    jQuery(".menu-trigger").click(function(){ 
 
    jQuery(".nav-menu").slideToggle('fast', function(){ 
 
     jQuery(this).toggleClass("nav-expanded"); 
 
    }); 
 
    }); 
 
});

.menu-trigger{ 
 
    display: block; 
 
    color: white; 
 
    background-color: #5978cf; 
 
    padding: 10px; 
 
    text-align: left; 
 
    font-size: 83%; 
 
    cursor: pointer; 
 
} 
 
.nav-menu{ 
 
    display: none; 
 
    background: green; 
 
    padding:6px; 
 
} 
 
.nav-menu.nav-expanded{ 
 
    display: block; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 
    .menu-trigger{ 
 
    display:none; 
 
    } 
 
    .nav-menu{ 
 
    display: block!important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu-trigger">BUTTON</div> 
 
<div class="nav-menu">MENU WRAPPER</div>

источник

2016-10-14 12:43:26 SCHTAILian

SlideToggle меню навигации исчезают слишком быстро

ответ

Смежные вопросы