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

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

How do I modify the Bootstrap drop down navigation to work on iPad?

navigation

drop-down-menu

twitter-bootstrap-3