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

我正在为我的主导航使用引导，单击时下拉菜单水平放置，请参见下面的屏幕截图

这是我目前的导航

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

切换导航

---

我试图做的是在浏览父站点的子页面时保持下拉列表的扩展，这样站点访问者就不会被迫继续单击“影响”链接来浏览其他子页面。任何帮助都将不胜感激。感谢您的帮助。

通过引导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');

---

（只需打开下拉列表，而不是切换按钮），但这不会突出显示您的下拉列表切换链接/按钮。

@kittsil再次感谢您抽出时间。在我读你们的帖子之前，我拼凑了一个阿尔比特，有点脏，但从你们最初的答案和我在帖子上读到的代码来看，下面是我的工作代码。我仍然需要对其进行折射以减小其大小，但它确实能按预期工作

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

$（函数（）{
if（window.location.href.indexOf（“关于”）>-1）
$（'.dropdown toggle.about'）。dropdown（'toggle'）；
else if（window.location.href.indexOf（“影响”）>-1）
$（'.dropdown toggle.impact'）。dropdown（'toggle'）；
else if（window.location.href.indexOf（“聚光灯”）>-1）
$（'.dropdown toggle.spotlight'）。dropdown（'toggle'）；
else if（window.location.href.indexOf（“资源”）>-1）
$（'.dropdown toggle.resources'）。dropdown（'toggle'）；
else if（window.location.href.indexOf（“涉及”）>-1）
$（'.dropdown toggle.included'）。dropdown（'toggle'）；
else console.log（'Netfinity太棒了！！'）
});

如果您使用的是：只在鼠标按下时有效的活动选择器，那么很高兴看到一些代码或jsfiddle我们也可以看到您的CSS吗。更改为悬停行为，您应该可以（例如，

.dropdown:hover>ul{display:block；}

，前提是它最初是隐藏的），否则您将需要一些J/S/jQuery来实现真正的“单击”行为。您需要设置一个cookie，比如说名为“opened”，扩展的下拉ID作为值。加载页面时，您可以读取cookie并应用正确的css类来保持下拉列表open@CrisimIlNumenoreano“这似乎是一种非常复杂的方式来做这件事。”卡勒姆。如果使用jquery.cookie和一些jquery魔法，就不会这样。我想大概有15行代码。您需要一种方法来知道需要打开哪个下拉列表，所以cookie或url查询是感谢所有人帮助的方法@kittsil，我决定采用你的解决方案。我添加了一个类，上面的代码现在看起来像

$（'.dropdown toggle'）。dropdown（'toggle'）

，它非常适合“resources”下拉列表。您知道如何编写if/else语句来检查特定下拉列表是否处于活动状态吗？再次感谢。@StudioRooster我已经用一个例子更新了答案，这个例子只在链接与页面标题匹配时有效。如果没有，您必须在href上进行匹配，或者在每个页面上添加一个标志来描述属于该页面的下拉列表。