我有三页:main.html, nav.html, sidebar.html
我已经为项目分隔了导航栏和侧边栏。在导航页面中,我具有用于折叠边栏页面的按钮。我正在使用引导框架作为主题。但是,当我将其分开时,单击导航栏上的按钮时,侧边栏不会折叠。这是main.html的代码
<link href="global/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="global/js/main/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$( "#nav" ).load( "inc/nav.html" );
$( "#sidebar" ).load( "inc/sidebar.html" );
});
</script>
<div id="nav"></div>
<div class="page-content" style="padding-bottom:70px;">
<div id="sidebar"></div>
<div class="content-wrapper bg-white">
<div class="content">test</div>
</div>
</div>
这是nav.html
<div class="navbar navbar-expand-md navbar-dark bg-indigo navbar-static" style="background:#81018d;">
<div class="navbar-brand">
<a href="#" class="d-inline-block">
<img src="../../assets/images/logo/headerwhite.png" alt="">
</a>
</div>
<div class="d-md-none">
<button class="navbar-toggler sidebar-mobile-main-toggle legitRipple" type="button">
<i class="icon-paragraph-justify3"></i>
</button>
</div>
</div>
和sidebar.html
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
<div class="sidebar-content">
<div class="card card-sidebar-mobile">
<ul class="nav nav-sidebar" data-nav-type="accordion">
<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu" title="Main"></i></li>
<li class="nav-item"><a href="#" class="nav-link active">Menu Beranda</a></li>
<li class="nav-item"><a href="#" class="nav-link">Transaksi</a></li>
</ul>
</div>
</div>
</div>