我收到了错误
未捕获的TypeError：$（...）。sideNav不是函数
在我的网站上我正在使用材料设计bootstrap 4.但sidenav不起作用。我在我的website.i中使用了Jquery，其中包含以下脚本标记。
<header>
<ul id="slide-out" class="side-nav fixed custom-scrollbar" style="background-color: #29ABE2;width: 100px;border-right: 1px solid #757575;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);">
<li>
<div class="logo-wrapper waves-effect">
<a href="#"><img src="img/Asset 17hdpi.png" class="img-fluid flex-center"></a>
</div>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover active">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="HOME" id="section_home"><img src="img/Home_1xhdpi.png" class="img-fluid" style="width: 50%;margin-left: 9px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR SOLUTIONS" id="section_solutions"><img src="img/Projects_2mdpi.png" class="img-fluid" style="width: 80%;margin-left: 0px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR SERVICES" id="section_services"><img src="img/Services_3xhdpi.png" class="img-fluid" style="width: 60%;margin-left: 9px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="OUR CLIENTS" id="section_clients"><img src="img/Store_4xhdpi.png" class="img-fluid" style="width: 43%;margin-left: 12px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="ABOUT US" id="section_about_us"><img src="img/Clients_5xhdpi.png" class="img-fluid" style="width: 40%;margin-left: 12px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="WORK AT EVONTEX" id="section_work_at"><img src="img/Solutions_12xhdpi.png" class="img-fluid" style="width: 57%;margin-left: 8px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="BLOG" id="blog"><img src="img/Blog_13xhdpi.png" class="img-fluid" style="width: 50%;margin-left: 9px;"></a>
</li>
<li style="margin-top: 10px;padding-bottom: 10px;" class="side_hover">
<a class="waves-effect padding_effect" data-toggle="tooltip" data-placement="right" title="CONTACT US" id="section_contact_us"><img src="img/Contacts_6xhdpi.png" class="img-fluid" style="width: 45%;margin-left: 11px;"></a>
</li>
</ul>
<nav class="navbar navbar-fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav" style="box-shadow: none;">
<div class="float-xs-left">
<a data-toggle="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<div class="breadcrumb-dn mr-auto">
<a>
<img src="img/ELOGO.png" class="flex-center" style="width: 18%;">
</a>
<span style="border-bottom: 3px solid #1F81AC;display: block;margin-left: 25px;width: 13%;margin-top: 15px;"></span>
</div>
<ul class="nav navbar-nav ml-auto flex-row">
<li class="nav-item" style="width: 200px;">
<button type="button" id="btn_touch" class="btn btn-primary get_in_touch_btn" style="background: #29ABE2;">GET IN TOUCH</button>
</li>
</ul>
</nav>
</header>
并在脚本下面使用脚本为Sidenav运行jquery方法
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/live/_MDB/js/customizer.min.js"></script>
下面是我的Header am使用材料设计bootstrap插件，打开侧边栏点击.button-collapse按钮。
<script type="text/javascript">
$('.button-collapse').sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>