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＆＃34; bs-example-navbar-collapse-1＆＃34;的div。这条线很好，但我建议将它重命名为更有用的东西，例如＆＃34; site-nav＆＃34;什么的。

现在，问题出现在这里：

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

这是你（正确）尝试扩展/崩溃的div。但你已经给它了id＆＃34; bs-example-navbar-collapse-1 navis＆＃34;，这与＆＃34; bs-example-navbar-collapse-1＆＃34;不同。因此，您单击按钮，但没有找到具有匹配ID的div。

要解决此问题，请将ID设置为＆＃34; bs-example-navbar-collapse-1＆＃34;相反（删除＆＃34; navis＆＃34;）：

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

现在，一切都应该在世界上。

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

Bootstrap下拉功能不起作用

1 个答案: