如何修改Bootstrap下拉導航以在iPad上工作？

Question

我正在下拉導航的Bootstrap網站上工作。導航在桌面版上運行正常，但在iPad上，如果我在父導航欄中有實時URL而不是主題標籤，則下拉導航確實會顯示，而我無法訪問這些鏈接。

這裏是我一起工作的導航：

<div class="navbar navbar-default" role="navigation"> 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
</div><!-- /.navbar-header --> 

<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li class="dropdown"> 
     <a href="/about-us/" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/about-us/history">History</a></li> 
      <li><a href="/about-us/brochure">Brochure</a></li> 
      <li><a href="/about-us/events">Events</a></li> 
      <li><a href="/about-us/testimonials">Testimonials</a></li> 
      <li><a href="/about-us/botanical-gardens">Botanical Gardens</a></li> 
      </ul> 
     </li> 
<li class="dropdown"> 
    <a href="/the-collection/" class="dropdown-toggle" data-toggle="dropdown">The Plants <span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="/shrubs/">Shrubs</a></li> 
    <li><a href="/groundcovers-grasses/">Groundcovers/Grasses</a></li> 
    <li><a href="/trees/">Trees</a></li> 
    <li><a href="/tropicals/">Tropicals</a></li> 
    <li><a href="/bulbs/">Bulbs</a></li> 
    <li><a href="/annuals/">Annuals</a></li> 
    <li><a href="/perennials/">Perennials</a></li> 
    <li><a href="/vines/">Vines</a></li> 
    <li><a href="/container-gardens/">Container Gardens</a></li> 
    <li><a href="/new-introductions/">New Introductions</a></li> 
    </ul> 
</li> 
<li class="dropdown"><a href="/in-the-garden/" class="dropdown-toggle" data-toggle="dropdown" >In the Garden <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
     <li><a href="/plant-care/">Plant Care</a></li> 
     <li><a href="/how-to/">How To</a></li> 
     <li><a href="/style-advice/">Style Advice</a></li> 
     <li><a href="/video/">Video</a></li> 
     <li><a href="/expert-advice/">Expert Advice</a></li> 
     <li><a href="/plant-spotlight/">Plant Spotlight</a></li> 
      </ul> 
</li> 

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect with Us <span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="http://www.facebook.com/pages/Southern-Living-Plant-Collection/108615996233?fref=ts"><img src="/images/icon_facebook.png" alt="icon_facebook" width="21" height="21"> Like Us</a></li> 
     <li><a href="https://twitter.com/@slplants"><img src="/images/icon_twitter.png" alt="icon_twitter" width="21" height="21"> Follow Us</a></li> 
     <li><a href="https://www.youtube.com/channel/UCumhUhgEt80YvG8p6mixmYA"><img src="/images/icon_youtube.png" alt="icon_youtube" width="21" height="21"> Watch Us</a></li> 
     <li><a href="/contact-us/request-newsletter"><img src="/images/icon_email.png" alt="icon_email" width="21" height="14"> Subscribe</a></li> 
     <li><a href="http://instagram.com/southernlivingplantcollection"><img src="/images/icon_instagram.png" alt="icon_instagram" width="21" height="21"> #SLPlants</a></li> 
     <li><a href="/about-us/events"><img src="/images/icon_cal.png" alt="icon_cal" width="21" height="22"> Events</a></li> 
     <li><a href="/about-us/botanical-gardens"><img src="/images/icon_twitter.png" alt="icon_twitter" width="21" height="21"> Botanical Gardens</a></li> 
    </ul> 
</li> 
</ul> 
</div><!--/.nav-collapse --> 
</div> 
</div> 

我也包括這個jQuery這是爲了幫助這樣的問題，但我只能訪問父導航。

jQuery(function($) { 
$('.navbar .dropdown').hover(function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 

}, function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 

}); 

$('.navbar .dropdown > a').click(function(){ 
location.href = this.href; 
}); 
}); 

我將不勝感激一些指導如何讓父導航功能以及下拉鍊接。

Answer 1

刪除以下jQuery的出現解決了頁面的問題上下拉時，點擊瀏覽你而去：

$('.navbar .dropdown > a').click(function(){ 
     location.href = $(this).href; 
    }); 

BOOTPLY