导航栏折叠 JQuery 未触发 - Bootstrap 3.1.1答案

【问题标题】：Navbar Collapse JQuery not firing - Bootstrap 3.1.1导航栏折叠 JQuery 未触发 - Bootstrap 3.1.1
【发布时间】：2015-07-10 20:29:03
【问题描述】：

我知道这个问题在 SO 上已经被问过很多次了，但是我尝试过的所有答案都没有奏效。

我想为基于 Bootstrap 3.1.1 和 Shopify 构建的主题启动超级菜单。

菜单已就位，但是我无法让菜单折叠！它只是在页面加载时卡在打开状态。

Bootply 运行良好

但是，在我的 staging server (Shopify) 上，它没有正确触发。（私服：lukeskywalker）

标题：

{{ 'bootstrap.css' | asset_url | stylesheet_tag }}
{{ 'style.css' | asset_url | stylesheet_tag }}

标记：

<header class="main-header container-fluid">
 <div class="row top-header">

 <div class="col-sm-6 col-md-6">
  {% include 'social' %}
 </div>

<div id="utilityNav" class="utility-nav col-sm-6 col-md-6">

    <form id="searchWrapper" class="floatRight" action="/search" method="get">
        <input type="hidden" name="type" value="product" />
        <input id="searchInput" type="text" name="q" placeholder="search..." value="">
        <input id="searchButton" type="submit" value="Search" alt="Search">
    </form><!-- searchWrapper -->

<ul class="user-utility">
    {% if shop.customer_accounts_enabled %}
    {% if customer %}

    <li{% if template contains 'customer' %} class="activePage"{% endif %}><a href="/account" title="Account">Account</a></li>
    <li>{{ "SIGN OUT" | customer_logout_link }}</li>
    {% else %}
    <li{% if template contains 'customer' %} class="activePage"{% endif %}>{{ "SIGN IN" | customer_login_link }} &nbsp;&nbsp; | </li>
    {% endif %}
    {% endif %}

        <li><a href="/cart" id="cartLink">BAG
        {% comment %}{% if shop.customer_accounts_enabled %}<span id="cartLinkBorder">|</span>{% endif %}{% endcomment %}
            <!-- <span id="cartIcon" class="icon-shopping-cart"></span> -->
            <span id="yourCart">{{ cart.item_count }}</span>
        </a>
        </li>
</ul>

    </div><!-- utilityMenu -->
</div> <!-- top header -->

<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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>
    <a class="navbar-brand" href="#">MegaMenu</a>
</div>

    <div class="collapse navbar-collapse js-navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown mega-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

            <ul class="dropdown-menu mega-dropdown-menu row">
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">New in Stores</li>
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                          <div class="carousel-inner">
                            <div class="item active">
                                <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
                                <h4><small>Summer dress floral prints</small></h4>
                                <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                            </div><!-- End Item -->
                            <div class="item">
                                <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
                                <h4><small>Gold sandals with shiny touch</small></h4>
                                <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                            </div><!-- End Item -->
                            <div class="item">
                                <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
                                <h4><small>Denin jacket stamped</small></h4>
                                <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                            </div><!-- End Item -->
                          </div><!-- End Carousel Inner -->
                        </div><!-- /.carousel -->
                        <li class="divider"></li>
                        <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Dresses</li>
                        <li><a href="#">Unique Features</a></li>
                        <li><a href="#">Image Responsive</a></li>
                        <li><a href="#">Auto Carousel</a></li>
                        <li><a href="#">Newsletter Form</a></li>
                        <li><a href="#">Four columns</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Tops</li>
                        <li><a href="#">Good Typography</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Jackets</li>
                        <li><a href="#">Easy to customize</a></li>
                        <li><a href="#">Glyphicons</a></li>
                        <li><a href="#">Pull Right Elements</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Pants</li>
                        <li><a href="#">Coloured Headers</a></li>
                        <li><a href="#">Primary Buttons & Default</a>  </li>
                        <li><a href="#">Calls to action</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Accessories</li>
                        <li><a href="#">Default Navbar</a></li>
                        <li><a href="#">Lovely Fonts</a></li>
                        <li><a href="#">Responsive Dropdown </a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Newsletter</li>
                        <form class="form" role="form">
                          <div class="form-group">
                            <label class="sr-only" for="email">Email address</label>
                            <input type="email" class="form-control" id="email" placeholder="Enter email">
                          </div>
                          <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                        </form>
                    </ul>
                </li>
            </ul>

        </li>
    </ul>

</div><!-- /.nav-collapse -->
</nav>
</div>





</header><!-- mainHeader -->

【问题讨论】：

我在这里进行了测试，完全适合我，您需要尝试一一删除和

标签： jquery html css twitter-bootstrap shopify

【解决方案1】：

在 style.css 文件的 CSS 代码中，您有：

.main-header ul, li {
  display: inline-block;
}

这将覆盖您的.mega-dropdown-menu，它具有display:none;，这就是您的菜单始终显示的原因。

不幸的是，即使我更改了您的菜单似乎也不起作用。我注意到，在 bootply 示例中，当您单击打开菜单时，DOM 将更新为“打开”（显示在 dropdown-menu 类旁边）类，并且还将添加 before 和 after 伪类，其中您的网站上似乎没有发生。

【讨论】：

我认为这是最可能的问题，CSS 覆盖。我想知道我是否解决了这个问题。main-header ul 它可能会更新 DOM 问题？
如果我是你，我会尝试在没有任何自定义 CSS 或 JS 的情况下测试你的网站，看看你是否可以让菜单在没有它的情况下工作，然后一次添加一个元素看看是什么导致了冲突。
这让我评论了：.main-header.container-fluid 和 .main-header ul, li 并且它有效！ ;)

【解决方案2】：

@crazymatt 是正确的，这种风格会导致您的导航在桌面视图中保持打开状态，尽管仅此一项并不能修复移动设备中的打开菜单。

如果您将以下样式添加到移动断点，移动菜单也将起作用。

.in .dropdown-menu {
   display: block;
}

我还注意到，在您的实时环境中，您两次调用了 jQuery 和引导库。我不相信它会导致此导航问题，但删除这些重复项是个好主意。页眉中有一个实例，页脚中有另一个集合（由 shopify 加载）。

【讨论】：