如何修改 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