移动引导导航条奇怪的问题

Question

我有一个网站，使用引导2.1.1和导航条移动设备作为一个bug。当我点击下拉图标，肚脐打开非常快，然后崩溃。当我重新点击时，它通常会打开，但是如果我点击原始下拉菜单中的产品下拉列表，它就会打开，但是当我点击这个下拉列表中的一个链接时，它似乎会点击另一个链接所在的背景中，在我下拉菜单之前。导航条形码如下：

<div class="row">
<div class="col-md-12">
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
       
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            
            <div class="collapse navbar-collapse" id=navbar-1>
                <ul class="nav navbar-nav">
                    <li id="home-lnk"><a href="/">Accueil</a></li>
                    <li id="produits-lnk" role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
                            Produits <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li id="system-lnk"><a href="/systeme">Système de gestion automatisé</a></li>
                            <li id="releasers-lnk"><a href="/relacheurs">Relâcheurs / Trappe à humidité / Panier Balle</a></li>
                            <li id="vacuum-lnk"><a href="/pompes_vacuum">Pompes Vacuum</a></li>
                            <li id="modulation-lnk"><a href="/controleur_modulation">Contrôleurs de modulation pour pompe vacuum</a></li>
                        </ul>
                    </li>
                    <li id="team-lnk"><a href="/equipe">Équipe</a></li>
                    <li id="contact-lnk"><a href="/contact">Contact</a></li>
                    <!--<li id="ditributors-lnk"><a href="/distributeurs">Distributeurs</a></li>-->
                    <li id="catalog-lnk"><a target="_blank" href="/files/Catalogue_ErabliTEK_2019.pdf">Catalogue (PDF)</a></li>
                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li><a href="http://admin.erablitek.com">Connexion</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

在主页HTML中，第22行：

<script type="text/javascript" src="/js/require.js" data-main="/js/common.js"></script>

在common.js内部，第19行：

bootstrap: '/js/lib/bootstrap.min',

我发现该站点同时加载了几个不兼容的Boostrap版本，特别是3.3.7来自CDN，以及2.2.1本地(via /js/lib/bootstrap.min')通过/lib/common.js加载，还有其他一些老东西(如jQuery 1.7！)，以及其他可能有冲突的库。我的结论是，由于common.js是在CDN的3.3.7版本之后加载的，所以它会覆盖后者，这是一个错误，因为如果您只使用3.3.7启动主页，移动导航中实际上就没有bug :参见copden：

https://codepen.io/larrytherabbit/pen/gOrvzbj

不管怎么说，如果你看看我的代码，导航手机工作100%好。现在是3.3.7 (我认为)，这让我认为问题就在那里，或者至少部分存在。

因此，如果您要修改/lib/common.js并删除旧库，我认为它是可以的。如果不管用，再来找我，我再看一遍。