Keep dropdown menu open while navigating child pages

Question

I am using bootstrap for my main nav and I have the dropdown-menu positioned horizontally when clicked, see screenshot below.

enter image description here

Here is my nav so far.

<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>

What I am trying to do is keep the dropdown expanded while navigating the child pages of the parent so the site visitors aren't forced to keep clicking the 'impact' link to browse other child pages. Any help would be greatly appreciated. Thank you for your help.

Can we see your CSS too?, if you are using the :active selector that only works on mouse down. Change to hover behaviour and you should be fine (e.g. `.dropdown:hover > ul {display:block;}`, providing it is hidden initially), otherwise you would need some J/S / jQuery for true "click" behaviour. — Callum., May 13 '15 at 08:07
you need to set a cookie let's say named "opened" with the expanded dropdown ID as value. when you load the page you can read the cookie and apply the right css class to keep the dropdown open — , May 13 '15 at 08:13
@CrisimIlNumenoreano That would appear to be a _very_ complex way of going about doing this. — Callum., May 13 '15 at 08:14
@Callum. not if you use jquery.cookie and some jquery magic. i think about 15 lines of code. and you need a way to know which dropdown needs to be opened, so cookie or url query is the way to go — , May 13 '15 at 08:27
@CrisimIlNumenoreano If OP was insistent on click behaviour and not hover (for pure CSS), a simple toggle could be used which would only be about ~3 lines of code bro ^^ — Callum., May 13 '15 at 08:55
@Callum. OP should clarify what he really need. the way href are written when you click on a link you are redirected to a new page, so he need a way to know if any dropdown was opened. if he is using a method to load the page with AJAX he shouldn't close the dropdown when a link is clicked. Studio Rooster, pls give more info — , May 13 '15 at 09:09
@CrisimIlNumenoreano They are on the sublinks, but not the main links, they have a href of # ^^ — Callum., May 13 '15 at 09:17

Kittsil · Answer 1 · 2015-05-13T20:55:01.490

Via the bootstrap JavaScript docs:

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

This will toggle the drop-down.

In order to only open the dropdown corresponding to the given page, you will need some way of determining "for my current page, what is the correct dropdown"? One way is to add a different line of code to each page; this is non-ideal.

A better option is to match the correct dropdown=toggle based on some attribute of the current page. For instance, if you know that the current page's title will match the title of the link in the nav bar, you can select the link which matches the current page, find its parent dropdown, find the button that triggers that dropdown, and toggle it:

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

You could also replace the last two lines with

dropdown.addClass('open');

(just open the dropdown, instead of toggling the button), but this will not highlight your dropdown-toggle link/button.

Thank you everyone for your help. @kittsil, I decided to go with your solution. I added a class and the above code now looks like `$('.dropdown-toggle').dropdown('toggle')` and it works perfectly for the 'resources' dropdown. Do you know how to write an if/else statement to check whether a particular dropdown is active? Thank you again. — Charles Smith, May 13 '15 at 18:24
@StudioRooster I have updated the answer with an example that works *only if the links match the page titles.* If they don't, you will have to match on the href, or add a flag to each page describing the dropdown that belongs to that page. — Kittsil, May 13 '15 at 20:57

score -1 · Accepted Answer · edited May 23 '17 at 11:45

@kittsil Thank you again for your time. Before I read your post, I pieced together an albiet, slightly dirty, but working example from your initial answer and code I read on post Check if url contains string with JQuery, below is my working code. I'll still need to refractor it to reduce to size, but it does work as expected.

<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>

Keep dropdown menu open while navigating child pages

2 Answers2