Сохранять раскрывающееся меню во время навигации по дочерним страницам

Question

Я использую bootstrap для своей основной навигации, и у меня есть раскрывающееся меню, расположенное горизонтально, когда вы нажимаете, см. Снимок экрана ниже.

Вот мой нав до сих пор.

<section class="row"> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
       aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">about us 
       <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="about-us">about us</a></li> 
       <li><a href="mission">mission</a></li> 
       <li><a href="kari-olson">team</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">impact <span 
        class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="cybercycle">CyberCycle</a></li> 
       <li><a href="music">Music & Memory</a></li> 
       <li><a href="care-innovations">Care Innovations</a></li> 
       <li><a href="mehca">MeHCA</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">spotlight 
       <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="news">in the news</a></li> 
       <li><a href="awards">awards/future</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">resources 
       <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="partners">partners</a></li> 
       <li><a href="media">videos & photos</a></li> 
       <li><a href="tools">tools & reports</a></li> 
       <li><a href="press">press releases</a></li> 
       <li><a href="stories">impact stories</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">get involved 
       <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="partner-with-us">partner with us</a></li> 
       <li><a href="volunteer-with-us">volunteer with us</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    <!--/.container-fluid --> 
    </nav> 
</section> 

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

Answer 1

@kittsil Еще раз спасибо за ваше время. Прежде чем я прочитал ваш пост, я собрал один из немногих, немного грязный, но рабочий пример из вашего первоначального ответа и кода, который я читал на пост Check if url contains string with JQuery, ниже - мой рабочий код. Мне все равно придется преувеличивать его, чтобы уменьшить размер, но он работает так, как ожидалось.

<script> 
    $(function() { 
    if (window.location.href.indexOf("about") > -1) 
     $('.dropdown-toggle.about').dropdown('toggle'); 
    else if (window.location.href.indexOf("impact") > -1) 
     $('.dropdown-toggle.impact').dropdown('toggle'); 
    else if (window.location.href.indexOf("spotlight") > -1) 
     $('.dropdown-toggle.spotlight').dropdown('toggle'); 
    else if (window.location.href.indexOf("resources") > -1) 
     $('.dropdown-toggle.resources').dropdown('toggle'); 
    else if (window.location.href.indexOf("involved") > -1) 
     $('.dropdown-toggle.involved').dropdown('toggle'); 
    else console.log('Netfinity is Awesome!!') 
    }); 
</script> 

Answer 2

через документы начальной загрузки JavaScript:

$('.dropdown-toggle').dropdown('toggle') 

Это приведет к переключению раскрывающийся.

Чтобы открыть раскрывающийся список, соответствующий данной странице, вам понадобится какой-то способ определения «для моей текущей страницы, каков правильный выпадающий список»? Один из способов - добавить на каждую страницу другую строку кода; это не идеально.

Лучшим вариантом является сопоставление правильного dropdown = toggle на основе некоторого атрибута текущей страницы. Например, если вы знаете, что заголовок текущей страницы будет соответствовать заголовку ссылки на панели навигации, вы можете выбрать ссылку, которая соответствует текущей странице, найти раскрывающийся список ее родителя, найти кнопку, которая вызывает это выпадающее меню, и переключить ее :

link = $('a').filter(function(index) { return $(this).text() === document.title; }); 
dropdown = link.parents('.dropdown'); 
button = dropdown.find('.dropdown-toggle'); 
button.dropdown('toggle'); 

Вы также могли бы заменить последние две строки с

dropdown.addClass('open'); 

(просто откройте ниспадающее меню, а не переключая кнопки), но это не будет выделить свой выпадающий-тумблер ссылку/кнопку.