У меня есть вертикальная навигационная панель, которая становится разборной при просмотре на мобильных устройствах. Я хочу, чтобы мои пользователи продолжали видеть навигационную панель даже после ее прокрутки, и только ее можно закрыть, нажав на элемент или на навигационном переключателе.Предотвращение перезагрузки Bootstrap от закрытия на мобильном телефоне при прокрутке
Я попробовал следующее (с поста на переполнение стека :)):
$('.sidebar-navbar-collapse').on({
"show.bs.collapse": function() { this.closable = false;console.log('in show nav'); },
"click": function() { this.closable = true; console.log('in click to hide nav'); },
"hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable); }
});
Но пока я вижу вывод для показанного изображения &, я не вижу его для события hide, когда он закрыт прокруткой.
HTML:
<div class="col-md-4 col-sm-4 sidebar-nav">
<div class="navbar" role="navigation">
<h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Topics</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE">
<li>
<a href="/faq/1" title="Privacy">Privacy</a>
</li>
<li>
<a href="/faq/2" title="Report">Report</a>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Вот JS скрипку:
https://jsfiddle.net/bv773t0a/
Спасибо!
Создайте нас JSFiddle? –
@GuruTom - я создал один и добавил его к вопросу. Благодаря! – hgolov
У вас есть сценарий в вашем main.js, который противоречит сценарию начальной загрузки. 'jQuery (". collapse.navbar-collapse.in "). removeClass (" in ");' – karan3112