Держите раскрывающееся меню открытым после перехода на другую страницу
Это объясняется в официальных документах официального выпуска Bootstrap 3 :
Шаги по отключению чувствительных представлений
Чтобы отключить чувствительные функции, выполните следующие действия шаги. См. Его в действии в модифицированном шаблоне ниже.
- Удалите (или просто не добавьте) область просмотра
, упомянутую в документах CSS- Удалите max- ширина на .container для всех уровней сетки с max-width: none! important; и установите правильную ширину, как ширина: 970px ;. Убедитесь, что это происходит после CSS Bootstrap по умолчанию. Вы можете опционально избегать важности с помощью медиа-запросов или некоторых селектор-fu.
- Если вы используете navbars, отмените все рушительные и расширяющиеся действия на навигационной панели (это слишком много, чтобы показать здесь, так что смотрите пример).
- Для макетов сетки используйте классы .col-xs- * в дополнение к или вместо средних / больших. Не беспокойтесь, сверхмаленькая сетка устройств масштабируется до всех разрешений, поэтому вы настроены там.
Вам все равно потребуется Respond.js для IE8 (поскольку наши медиа-запросы все еще там, и их нужно подбирать). Это просто отключает «мобильный сайт» Bootstrap.
blockquote>См. Также пример в GetBootstrap.com/examples/non-responsive /
3 ответа
Может быть, вы можете сохранить «статус» меню в файле cookie или в сеансе, например, в виде снимка, и прочитать его при загрузке страницы.
Используя javascript, найдите привязку, URL которой соответствует текущему URL, а затем переключите видимость своего родителя.
Очевидно, что вам нужно будет настроить ваши специфические потребности.
$(document).ready(function(){
//var current_url = window.location.href;
var current_url = "news";
$(".sub-menu").find("a[href='" + current_url + "']").closest("ul").addClass("show");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'home' %}"> <i class="menu-icon fa fa-home"></i>Home </a></li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>MAIN</a>
<ul id="navigation" class="sub-menu children dropdown-menu">
<li><a href="news">News</a></li>
<li><a href="{% url 'sport' %}">Sport</a></li>
<li><a href="{% url 'lifestyle' %}">Lifestyle</a></li>
<li><a href="{% url 'economy' %}">Economy</a></li>
<li><a href="{% url 'politics' %}">Politics</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bolt"></i>ABOUT</a>
<ul class="sub-menu children dropdown-menu">
<li><a href="{% url 'authors' %}">Authors</a></li>
<li><a href="{% url 'history' %}">History</a></li>
<li><a href="{% url 'trivia' %}">Trivia</a></li>
</ul>
</li>
</ul>
</div>var url = location.href;
$('.sub-menu').each(function() {
var $dropdownmenu = $(this);
$(this).find('li').each(function() {
if( $(this).find('a').attr('href')== url ) {
console.log( $dropdownmenu ); // this is your dropdown menu which you want to display
console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
}
});
});
Этот код поможет
* Модифицировано