引导下拉功能不起作用

Question

需要帮助来解决引导下拉导航问题。我遵循了所有可用的规则，但我遗漏了一些东西。请帮忙。

服务选项卡有两个下拉菜单，单击插入符号时应打开。但是网站 css 不允许这样做。

 <!-- navbar-header -->
        <div class="header-nav">            
<nav class="navbar navbar-default">
                    <div class="navbar-header logo">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <h1>
                                    <a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
                                </h1>
                    </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="http://www.example.com/" class="hvr-bounce-to-bottom active">Home</a></li>
                            <li><a href="http://www.example.com/about-us.php" class="hvr-bounce-to-bottom">About</a></li>

        <li class="dropdown">
          <a href="http://www.example.com/seo-service.php" class="dropdown-toggle" data-toggle="dropdown" >Services <span class="caret"></span></a>
              <ul class="dropdown-menu">
                 <li><a href="http://www.example.com/seo-service.php">SEO Service</a></li>
                 <li><a href="digital-marketing-company.php">Digital Marketing</a></li>
              </ul>
        </li>



<li><a href="#projects" class="hvr-bounce-to-bottom scroll">Projects</a></li>
                            <li><a href="http://www.example.com/timeline.php" class="hvr-bounce-to-bottom">Timeline</a></li>
                            <li><a href="http://www.example.com/contact-us.php" class="hvr-bounce-to-bottom">Contact</a></li>



                        </ul>
                    </div>
                    <div class="contact-bnr-w3-agile">
                                <ul>
                                    <!--<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>-->
                                    <li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>   
                                </ul>
                            </div>
                    <div class="clearfix"> </div>   
                </nav>
                            <div class="clearfix"> </div>
        </div>

Answer 1

您的代码中有错字：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

这里，data-target 表示当您单击按钮时要切换的 div。因此，它正在寻找 ID 为“bs-example-navbar-collapse-1”的 div。这行很好，不过我建议将其重命名为更有用的名称，例如“site-nav”或其他名称。

现在，问题出现在这里：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">

这是您（正确地）尝试展开/折叠的 div。但是您给它的 id 是“bs-example-navbar-collapse-1 navis”，它与“bs-example-navbar-collapse-1”不同。因此，您正在单击按钮，但没有找到具有匹配 ID 的 div。

要解决此问题，请将 ID 设置为“bs-example-navbar-collapse-1”（删除“navis”）：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

现在，世界上一切都应该是正确的。

此外，就上面提到的 jQuery 警告而言，您似乎已经在加载 jQuery 2，因此您也不需要包含 1.12。因此，请确保包含所需的 jQuery 库。