Bootstrap导航栏折叠菜单在手机中不起作用

Question

我已经尝试了很长时间来解决此问题很长时间了，我多次遍历我的代码，在引导文件之前保留了jquery文件，但它们仍然不起作用！

（我是编程新手，所以如果这是一个愚蠢的错误，请原谅，谢谢！）

<nav class="navbar navbar-default" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="<?php echo base_url(); ?>">love</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li><a href="<?php echo base_url(); ?>about">About</a>
            </li>
            <li><a href="<?php echo base_url(); ?>contact">Contact</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Help</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Other</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

对于数据目标，请使用ID。 和“ collapse navbar-collapse”类div上的相同ID。

<nav class="navbar navbar-default" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo base_url(); ?>">love</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li><a href="<?php echo base_url(); ?>about">About</a>
            </li>
            <li><a href="<?php echo base_url(); ?>contact">Contact</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Help</a>
            </li>
            <li><a href="<?php echo base_url(); ?>blog">Other</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 2

以正确的顺序订购您的jquery和bootstrap 。 检查以下代码段，它可以正常工作。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="<?php echo base_url(); ?>">love</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="<?php echo base_url(); ?>">Home</a> </li> <li><a href="<?php echo base_url(); ?>about">About</a> </li> <li><a href="<?php echo base_url(); ?>contact">Contact</a> </li> <li><a href="<?php echo base_url(); ?>blog">Help</a> </li> <li><a href="<?php echo base_url(); ?>blog">Other</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>