为什么 sideNav 功能在 bootstrap 中不起作用

Question

我正在实施 Bootstrap 导航栏，但它显示不正常并且在我的控制台上显示错误

我尝试更改我的脚本 sin head 部分的顺序，但没有解决这个问题。谁能帮我找出我的错误？

代码

<head>
    <meta charset="UTF-8">
    <title></title>

    <!-- Ajax Library 1.11.3 -->
    <script src="assets/js/ajax_1.11.3.js"></script>

    <!-- Tether for Bootstrap --> 
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>

    <!-- Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <!--    Including js file for Animations Effects-->
    <script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script>

    <!--Including both these files from Html_respond master-->
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>

    <!--    Including js file for Fonts-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">

    <!--    Including Files for Bootstrap Form Validations  -->
    <script src="assets/js/form_Validation.js"></script>
    <script src="assets/js/formvalidation_bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.button-collapse').sideNav();
        }); // end of document ready
    </script>
</head>
<body>
    <!--Navbar-->
    <nav class="navbar navbar-dark bg-primary">
        <!--Collapse button-->
        <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars white-text"></i></a>
        <!--Content for large and medium screens-->
        <div class="navbar-desktop">
            <!--Navbar Brand-->
            <a class="navbar-brand" href="#">Navbar</a>
            <!--Links-->
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <!--Search form-->
            <form class="form-inline pull-xs-right">
                <input class="form-control" type="text" placeholder="Search">
            </form>
        </div>
        <!-- Content for mobile devices-->
        <div class="navbar-mobile">
            <ul class="side-nav" id="mobile-menu">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </nav>
    <!--/.Navbar-->
</body>

Answer 1

双导航菜单演示（SideNav 滑出按钮）

// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();

 body {
       background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed;
       background-size: cover;
}

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">

<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">

<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="navbar-brand button-collapse"><i class="material-icons">menu</i></a>
<!--/. SideNav slide-out button -->


    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>

    <!-- Material Design Bootstrap -->
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>


<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><a href="#intro" class="waves-effect waves-light"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="#" class="waves-effect waves-light"><i class="fa fa-money"></i> Sales</a></li>
            <li><a href="#" class="waves-effect waves-light"><i class="fa fa-line-chart"></i> Conversion</a></li>
            <li><a href="#" class="waves-effect waves-light"><i class="fa fa-users"></i> Website Traffic</a></li>
            <li><a href="#" class="waves-effect waves-light"><i class="fa fa-search"></i> SEO</a></li>
            <li><a href="#" class="waves-effect waves-light"><i class="fa fa-share-alt"></i> Social</a></li>
        </ul>
        <!--/. Side navigation links -->

    </ul>
    <!--/. Sidebar navigation -->

    <!--Navbar-->
    <nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header pull-left">
                <!-- SideNav slide-out button -->
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
                <!--/. SideNav slide-out button -->

            </div>

            <!-- Navbar Icons -->
            <ul class="list-inline pull-right text-center">
                <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-question"></i><br><span>Help</span></a></li>
                <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-cogs"></i><br><span>Settings</span></a></li>
                <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-sign-out"></i><br><span>Logout</span></a></li>

            </ul>
            <!--/. Navbar Icons -->
        </div>
    </nav>
    <!--/.Navbar-->
    <div class="container">
        <div class="space-50" style="height: 300px"></div>
        <h1 class="white-text">Scorll Down</h1>
        <div class="space-50" style="height: 900px"></div>
    </div>

切换导航演示。

// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();

body {
 background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed;
 background-size: cover;
}

.top-nav-collapse {
 background-color: #3F729B !important;
}
/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
 .navbar {
  background-color: #3F729B !important;
 }
}

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">

<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>

<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>


<!--Navbar-->
<nav class="navbar primary-color">
 <div class="container-fluid">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
    <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 waves-effect waves-light" href="#">Brand</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" class="waves-effect waves-light">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#" class="waves-effect waves-light">Link</a></li>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="divider"></li>
      <li><a href="#">One more separated link</a></li>
     </ul>
    </li>
   </ul>
   <form class="navbar-form navbar-right" role="search">
    <div class="form-group waves-effect waves-light">
     <input type="text" class="form-control" placeholder="Search">
    </div>
   </form>
  </div>
 </div>
</nav>
<!--/.Navbar-->

为什么 sideNav 功能在 bootstrap 中不起作用

why sideNav function is not working in bootstrap

javascript

twitter-bootstrap

css

twitter-bootstrap-3

twitter-bootstrap-4