jQuery .load HTML不初始化引导程序

时间:2019-04-04 09:45:01

标签: javascript jquery html

我有三页: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>

0 个答案:

没有答案