顶部导航对应侧边栏菜单切换

关于切换这个问题，已经在插件整合项目和演示网站上有了。详细大家可以去查看。

1、先将原有的侧边栏菜单拆分，这里将其分为三份，每一份就是一个 `ul`，这里的 `id` 分别为 `menus-1`，`menus-2`，`menus-3`。

代码中 `id="menus-*"` ，叫什么自己定义即可，`ul` 上的 `class` 加上 `collapse` 隐藏，第一个不用。

```html
<nav class="sidebar-main">

<ul class="nav-drawer" id="menus-1">
 <li class="nav-item active">
 <a class="multitabs" href="lyear_main.html" id="default-page">
 
 后台首页
 </a>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 布局示例
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_layout_form.html">表单布局示例</a> </li>
 <li> <a class="multitabs" href="lyear_layout_chat.html">聊天页面示例</a> </li>
 <li> <a class="multitabs" href="lyear_layout_logo_text.html">logo处使用文字</a> </li>
 <li> <a class="multitabs" href="lyear_layout_modal_tab.html">模态框中使用Tab标签页</a> </li>
 <li> <a class="multitabs" href="lyear_layout_modal_maximize.html">模态框最大化</a> </li>
 <li> <a class="multitabs" href="lyear_layout_search_1.html">搜索布局</a> </li>
 <li> <a class="multitabs" href="lyear_layout_search_2.html">搜索布局2</a> </li>
 <li> <a class="multitabs" href="lyear_layout_search_3.html">搜索布局3</a> </li>
 <li> <a class="multitabs" href="lyear_layout_chose_1.html">选择示例</a> </li>
 <li> <a class="multitabs" href="lyear_layout_chose_2.html">选择示例2</a> </li>
 <li> <a class="multitabs" href="lyear_layout_chose_3.html">选择示例3</a> </li>
 <li> <a class="multitabs" href="lyear_layout_chose_4.html">选择示例4</a> </li>
 <li> <a class="multitabs" href="lyear_layout_code.html">代码演示切换</a> </li>
 <li> <a class="multitabs" href="lyear_layout_message.html">留言列表布局</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_1.html">可用的布局(数据统计篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_2.html">可用的布局(产品价格篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_3.html">可用的布局(搜索框篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_4.html">可用的布局(用户篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_5.html">可用的布局(动画篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_widgets_6.html">可用的布局(其他篇)</a> </li>
 <li> <a class="multitabs" href="lyear_layout_other_side.html">另一种侧边栏菜单</a> </li>
 <li> <a href="lyear_layout_header_sider.html" target="_blank">顶部和左侧联动</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 时间插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_daterangepicker.html">时间段选择器</a> </li>
 <li> <a class="multitabs" href="lyear_js_material_datetimepicker.html">Material Datetimepicker</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 上传插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_dropzone.html">dropzone插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_uploadify.html">uploadify插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_webuploader.html">webuploader插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_cropper.html">cropper图片裁剪</a> </li>
 <li> <a class="multitabs" href="lyear_js_h5_uploader.html">FormData上传</a> </li>
 <li> <a class="multitabs" href="lyear_js_webuploader_attachment.html">webuploader(附件)</a> </li>
 <li> <a class="multitabs" href="lyear_js_webuploader_images.html">webuploader(图片)</a> </li>
 </ul>
 </li>
 </ul>
 <ul class="nav-drawer collapse" id="menus-2">
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 HTML编辑器插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_ckeditor.html">ckeditor</a> </li>
 <li> <a class="multitabs" href="lyear_js_editormd.html">editormd</a> </li>
 <li> <a class="multitabs" href="lyear_js_summernote.html">summernote</a> </li>
 <li> <a class="multitabs" href="lyear_js_tinymce.html">tinymce</a> </li>
 <li> <a class="multitabs" href="lyear_js_ueditor.html">ueditor</a> </li>
 <li> <a class="multitabs" href="lyear_js_wangeditor.html">wangeditor</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 表单验证
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_jquery_validate.html">jquery validate</a> </li>
 <li> <a class="multitabs" href="lyear_js_bootstrap_validate.html">bootstrap validate</a> </li>
 <li> <a class="multitabs" href="lyear_js_validate.html">联动插件的验证</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 下拉列表插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_bootstrap_selectN.html">联动插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_bootstrap_lyear_select.html">简单下拉插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_select2.html">select2下拉插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_dropdowntree.html">下拉树状菜单</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 树状插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_ztree.html">ZTree树形菜单插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_treeview.html">treeview树状插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_jstree.html">树状结构插件</a> </li>
 </ul>
 </li>
 </ul>
 <ul class="nav-drawer collapse" id="menus-3">
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 滑块验证插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_img_verification.html">拼图滑块插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_slider_verification.html">滑块验证</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 弹窗插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_layer.html">layer弹窗插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_sweet.html">sweet弹窗插件</a> </li>
 </ul>
 </li>
 <li class="nav-item nav-item-has-subnav">
 <a href="javascript:void(0)">
 
 其他插件
 </a>
 <ul class="nav nav-subnav">
 <li> <a class="multitabs" href="lyear_js_touchspin.html">输入微调器组件</a> </li>
 <li> <a class="multitabs" href="lyear_js_toolbar.html">弹出式工具栏</a> </li>
 <li> <a class="multitabs" href="lyear_js_auto_complete.html">自动完成插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_fixedheadertable.html">固定表头插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_fontIconPicker.html">图标选择插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_jquery_raty.html">评分插件</a> </li>
 <li> <a class="multitabs" href="lyear_js_range_slider.html">滑块插件</a> </li>
 </ul>
 </li>
 </ul>
 
</nav>
```
2、其次，添加顶部导航，这里放到 `navbar-left` 里面。
```html
<div class="dropdown">
 
 <ul class="lyear-topbar dropdown-menu">
 <li class="dropdown-item"><a class="nav-link active" href="javascript:void(0)" data-menuid="1">默认</a></li>
 <li class="dropdown-item"><a class="nav-link" href="javascript:void(0)" data-menuid="2">菜单一</a></li>
 <li class="dropdown-item"><a class="nav-link" href="javascript:void(0)" data-menuid="3">菜单二</a></li>
 </ul>
</div>
```

这里需要增加几行样式
```css
.lyear-topbar {
    margin: 0px;
    padding: 0px;
}
.lyear-topbar .nav-link {
    padding: 0 1rem;
    line-height: 30px;
    color: var(--bs-body-color);
}
.lyear-topbar .nav-link:hover,
.lyear-topbar .nav-link.active {
    color: var(--bs-primary)
}

@media screen and (max-width: 980px) {
    .header-icon-menu {
        display: block;
        height: 68px;
        line-height: 68px;
        font-size: 1.5em;
        cursor: pointer;
        padding: 0 12px;
        text-align: center;
    }
    .navbar-left .lyear-topbar li {
        float: none;
    }
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a,
    [data-theme*='dark'] .navbar-left .lyear-topbar a {
        color: rgba(255, 255, 255, .75);
    }
    [data-theme*='translucent-'] .lyear-topbar .nav-link.active,
    [data-theme*='dark'] .lyear-topbar .nav-link.active {
        color: #fff;
    }
}
@media (min-width: 980px) {
    .header-icon-menu {
        display: none;
    }
    .navbar-left .lyear-topbar {
        display: block;
        position: inherit;
        top: 0px;
        box-shadow: none;
        background-color: transparent;
        padding: 0px;
        margin: 0px;
    }
    .navbar-left .lyear-topbar .dropdown-item {
        display: inline-block;
        width: auto;
        padding: 0px;
    }
    .navbar-left .lyear-topbar .dropdown-item.active,
    .navbar-left .lyear-topbar .dropdown-item:active {
        background-color: transparent;
    }
    .navbar-left .lyear-topbar .dropdown-item:hover,
    .navbar-left .lyear-topbar .dropdown-item:focus {
        background-color: transparent;
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.nav-link,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.nav-link,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.nav-link {
        color: rgba(255, 255, 255, .75);
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a:focus,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a:hover,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a:focus,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a:hover,
    [data-theme*='dark'] .navbar-left .lyear-topbar a:focus,
    [data-theme*='dark'] .navbar-left .lyear-topbar a:hover {
        color: #fff;
    }
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active:focus,
    [data-headerbg*='color_'] .navbar-left .lyear-topbar a.active:hover,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active:focus,
    [data-theme*='translucent-'] .navbar-left .lyear-topbar a.active:hover,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active:focus,
    [data-theme*='dark'] .navbar-left .lyear-topbar a.active:hover {
        color: #fff;
    }
    [data-theme*='translucent-'] .navbar-left .lyear-topbar,
    [data-theme*='dark'] .navbar-left .lyear-topbar {
        background-image: none;
    }
}
```

3、最后针对顶部菜单绑定 `click` 事件。
```javascript
$(document).on('click', '.lyear-topbar .nav-link', function () {
    var $this = $(this),
        $menuid = $this.data('menuid');
    $('.sidebar-main .nav-drawer').slideUp('slow');
    $('#menus-' + $menuid).slideDown('slow');
    $this.parents('ul.lyear-topbar').find('a.nav-link').removeClass('active');
    $this.addClass('active');
    $('.lyear-layout-sidebar-scroll').animate({scrollTop: 0}, 300);  // 处理滚动条到最上方
});
```

4、找到 `js\bootstrap-multitabs\multitabs.js` 新增一段代码（大概588行）：

```javascript
            $('.nav-drawer').find('li').removeClass('active');
            $navObj.parent('li').addClass('active');
            $navHasSubnav.addClass('active');

// 以下是新增代码，别复制错了
            var $thisDrawer   = $navHasSubnav.parent('.nav-drawer'),
                $thisDrawerId = $thisDrawer.attr('id'),
                $thisIdArr    = $thisDrawerId.split('-');
            $.each($('.nav-drawer'), function (i, v) {
                var $thisUl = $(v);
                if ($thisUl.attr('id') == $thisDrawerId) {
                    $thisDrawer.stop(true, true).show();
                } else {
                    $thisUl.slideUp('500');
                    //console.log('===', $('.nav-drawer'))
                }
            });
            $.each($('.lyear-topbar li'), function (inx, ve) {
                var $thisLink = $(ve).find('a');
                $thisLink.removeClass('active');
                if ($thisLink.data('menuid') == $thisIdArr[1]) {
                    $thisLink.addClass('active');
                }
            });
// 以上是新增代码，别复制错了

// 当前菜单无子菜单
            if (!$navObj.parents('.nav-item').first().is('.nav-item-has-subnav')) {
                var hht = 48 * ( $navObj.parents('.nav-item').first().prevAll().length - 1 );
                $('.lyear-layout-sidebar-info').animate({scrollTop: hht}, 300);
            }

// 另外还要注意这里的一句代码（复制了上面的代码后是618行），增加了一个stop(false, true)
            var $sideDownObj = $navObj.parents('ul.nav-subnav').stop(false, true).filter(':hidden');
```

> 如果你的实际应用中引入的是 `multitabs.min.js` 文件，那么请在修改后，重新压缩代码到该文件中。

演示效果：
![](/uploads/images/20230210/e5b17a6f10524ec8cf63bde05febd576.gif)