导航栏不会折叠 Bootstrap v4.0.0-alpha.5

Question

我正在使用 html 版本中带有 php 页眉和页脚的网站工作，但在 php 中导航栏不返回。

这是我的代码头：

    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div id="logo" class="float-xs-left">
                    <a class="navbar-brand" href="xxxxxxx/"><img src="img/logo-white.png" /></a>
                </div>
            </div>
            <!--div class="col-sm-6" -->
            <div class="float-xs-right">
                <!--/div> -->


    <!--cols:12   -->
                <!--cols:12   -->
                <div class="offcanvas">
                    <div class="navbar yamm col-lg-8 col-md-8 col-sm-6 ">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".offcanvas.menu">
                                <i class="fa fa-bars"></i>
                                <div class="line line-1"></div>
                                <div class="line line-2"></div>
                                <div class="line line-3"></div>
                            </button>
                        </div>
                        <!-- outside -->
                        <div class="offcanvas menu right">
                            <div class="navbar-collapse collapse">
                                <button data-target=".offcanvas.menu" data-toggle="collapse" class="navbar-toggle" type="button">
                                </button>
                                <div class="nav navbar-nav">
                                    <div class="list-group">
                                        <!-- li><a href=""><span class="home">&#8962;</span></a></li -->
                                        <a href="#"><img class="logo-img" src="img/logo-full.png" class="img-responsive" /></a>
                                        <a href="index.php" class="list-group-item ">                    INICIO </a>
                                        <a href="#p5" class="list-group-item " data-toggle="collapse">                 home <b class="fa fa-chevron-down"></b></a>
                                        <div class="collapse" id="p5">
                                            <a href="page-1.php" class="list-group-item">
                            Espresso                             </a>
                                            <a href="page-2.php" class="list-group-item">
                            Clásico                             </a>
                                            <a href="page-3.php" class="list-group-item">
                            Orgánico                            </a>
                                            <a href="page-4.php" class="list-group-item">
                            Descafeinado                           </a>
                                            <a href="page-5.php" class="list-group-item">
                            Toscana                           </a>
                                        </div>
                                        <a href="page-10.php" class="list-group-item ">                    </a>
                                        <a href="page-11.php" class="list-group-item ">                    </a>
                                        <a href="page-12.php" class="list-group-item ">                   </a>
                                        <a href="#p6" class="list-group-item " data-toggle="collapse">                  <b class="fa fa-chevron-down"></b></a>
                                        <div class="collapse" id="p6">
                                            <a href="page-11.php" class="list-group-item">
                                                  </a>
                                        </div>
                                        <a href="#p4" class="list-group-item " data-toggle="collapse">                  <b class="fa fa-chevron-down"></b></a>
                                        <div class="collapse" id="p4">
                                            <a href="page-13.php" class="list-group-item">
                            item                             </a>
                                            <a href="#c1" class="list-group-item" data-toggle="collapse">
                           another one<b class="fa fa-chevron-down"></b> <span class="cat_url" onclick="location.href='other.php'"><i class="fa fa-mail-forward"></i></span>                           </a>
                                            <div class="collapse" id="c1">
                                                <a href="page-14.php" class="list-group-item">name</a>
                                                <a href="item-1.php" class="list-group-item">name</a>
                                                <a href="item-2.php" class="list-group-item">name</a>
                                                <a href="item.php" class="list-group-item">name</a>
                                                <a href="item.php" class="list-group-item">name</a>
                                            </div>
                                            <a href="#" class="list-group-item">
                            other page                            </a>
                                            <a href="#" class="list-group-item">
                             other page                              </a>
                                            <a href="#" class="list-group-item">
                             other page                             </a>
                                            <a href="page-15.php" class="list-group-item">
                           other name                          </a>
                                            <a href="page.php" class="list-group-item">
                            name                          </a>
                                            <a href="page.php" class="list-group-item">
                            name                            </a>
                                            <a href="#" class="list-group-item">
                            name                           </a>
                                        </div>
                                        <a href="#p7" class="list-group-item " data-toggle="collapse">                  page title <b class="fa fa-chevron-down"></b></a>
                                        <div class="collapse" id="p7">
                                            <a href="page-16.php" class="list-group-item">
                            Name                          </a>
                                            <a href="page-17.php" class="list-group-item">
                           name                             </a>
                                        </div>
                                        <a href="#" class="list-group-item ">                   page </a>
                                    </div>
                                    <br/>

                                    </div>
                                </div>
                            </div>
                            <!-- /.navbar-collapse -->
                        </div>
                        <div class="pusher"></div>
                        <!-- end outside -->
                    </div>
                </div>
            </div>
            <!--cols:12   -->
            <div class="navbar yamm    ">
                <div class="navbar-header hidden-lg-up">
                    <button type="button" class="navbar-toggler" 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>
                <div class="navbar-toggleable-md collapse">
                    <ul class="nav navbar-nav">
                        <!-- li><a href=""><span class="home">&#8962;</span></a></li -->
                        <li class="nav-item                                                                         ">
                            <a href="contacto.php" >Contáctanos</a>
                        </li>
                        <li class="nav-item                                                                         ">

                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
        </div>
    </div>
    </div>

</header>

在控制台得到这个错误：

document.querySelector( "#nav-toggle" )
.addEventListener( "click", function() {
 this.classList.toggle( "active" );
});

有人知道问题出在哪里，我该如何解决？

解决了

问题在于页脚页眉和调用同一文件的页面，因此当调用该函数时，状态不会返回，因为重复该操作 3 次

Answer 1

终于解决问题了，页眉、页脚和索引中有一个三重脚本语句，在页眉和页脚中被删除了，就这样。