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

Question

我知道这个问题已经被问过很多次了，但是我试过的所有答案都没有用。

我想为基于 Bootstrap 3.1.1 和 Shopify 的主题创建一个超级菜单。

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

它在这个 Bootply

上运行完美

但是，在我的 staging server (Shopify) 上，它无法正常启动。（密码：lukeskywalker）

Header:

{{ '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 -->

Answer 1

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

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

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

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

Answer 2

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

如果您将以下样式添加到移动端断点，移动端菜单也会正常工作。

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

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

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

Navbar Collapse JQuery not firing - Bootstrap 3.1.1

html

css

jquery

shopify

twitter-bootstrap