在浏览子页面时保持下拉菜单打开

Question

我为我的主导航使用引导程序，并且点击时水平定位了下拉菜单，请参见下面的截图。

这里是我的资产净值至今。

<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再次感谢您的时间。在我阅读你的文章之前，我拼凑出一个稍微脏兮兮的albiet，但是你的初始答案和我在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') 

这将切换下拉。

为了只打开对应于给定页面的下拉菜单，您需要一些方法来确定“我的当前页面，什么是正确的下拉菜单”？一种方法是为每个页面添加一行不同的代码;这是不理想的。

更好的选择是根据当前页面的某个属性匹配正确的下拉菜单=切换。例如，如果您知道当前页面的标题将与导航栏中链接的标题相匹配，则可以选择与当前页面相匹配的链接，查找其下拉菜单，找到触发该下拉菜单的按钮并将其切换：

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'); 

替换最后两行（只需打开下拉列表，而不是切换的按钮），但是这不会突出你的下拉菜单，肘杆/按钮。