在导航子页面时保持打开下拉菜单

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

我正在使用bootstrap作为我的主导航,我点击下拉菜单水平定位,见下面的截图。

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.

我想要做的是在导航父母的子页面时保持下拉列表的扩展,这样网站访问者就不会*继续点击“影响”链接来浏览其他子页面。任何帮助将不胜感激。谢谢您的帮助。

2 个解决方案

#1

Via the bootstrap JavaScript docs:

通过bootstrap JavaScript文档:

$('.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:

更好的选择是根据当前页面的某些属性匹配正确的dropdown = toggle。例如,如果您知道当前页面的标题将与导航栏中的链接标题匹配,您可以选择与当前页面匹配的链接,找到其父下拉列表,找到触发该下拉列表的按钮,然后切换它:

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.

(只需打开下拉菜单,而不是切换按钮),但这不会突出显示您的下拉菜单切换链接/按钮。

#2

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

@kittsil再次感谢您的时间。在我阅读你的帖子之前,我拼凑了一个白痴,有点脏,但是从你最初的答案和我在帖子上读到的代码的工作示例检查url是否包含带有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>