在瀏覽子頁面時保持下拉菜單打開

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

替換最後兩行（只需打開下拉列表，而不是切換的按鈕），但是這不會突出你的下拉菜單，肘杆/按鈕。