如何修改引导下拉导航以在iPad上工作

Question

>我正在开发一个具有下拉导航的引导程序站点。导航在桌面版本上工作正常，但在 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;
    });

引导