refactor: 侧边栏树状控件使用collaps实现

Bootstrap.Admin/Views/Shared/Navigator.cshtml

@@ -15,7 +15,7 @@
     </div>
     <!-- sidebar menu start-->
     <div class="sidebar">
-        <ul class="nav-sidebar nav nav-pills flex-column flex-nowrap" data-widget="treeview">
+        <ul class="nav-sidebar nav nav-pills flex-column flex-nowrap">
             @foreach (var menu in Model.Navigations)
             {
                 @await Html.PartialAsync("SubNavItem", menu)

Bootstrap.Admin/Views/Shared/SubNavItem.cshtml

@@ -1,18 +1,28 @@
 @model Bootstrap.Security.BootstrapMenu
 @if(Model.Menus.Any()) 
 {
-    if(@Model.Active == "active")
+    <li class="nav-item parent">
-    {
+        @if(Model.Active == "active")
-        <li class="nav-item has-treeview menu-open">
+        {
-            @await Html.PartialAsync("SubNavItemLink", Model)
+            <a href="@string.Format("#collapse_{0}", Model.Id)" role="button" data-toggle="collapse" class="nav-link active"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span><i class="fa fa-angle-left"></i></a>
-        </li>
+            <div class="show" id="@string.Format("collapse_{0}", Model.Id)">
-    }
+            @if (Model.Menus.Any())
-    else 
+            {
-    {
+                @await Html.PartialAsync("SubNavigation", Model.Menus)
-        <li class="nav-item has-treeview">
+            }
-            @await Html.PartialAsync("SubNavItemLink", Model)
+            </div>
-        </li>
+        }
-    }
+        else 
+        {
+            <a href="@string.Format("#collapse_{0}", Model.Id)" role="button" data-toggle="collapse" class="nav-link collapsed"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span><i class="fa fa-angle-left"></i></a>
+            <div class="collapse" id="@string.Format("collapse_{0}", Model.Id)">
+            @if (Model.Menus.Any())
+            {
+                @await Html.PartialAsync("SubNavigation", Model.Menus)
+            }
+            </div>
+        }
+    </li>
 }
 else 
 {

Bootstrap.Admin/Views/Shared/SubNavItemLink.cshtml

@@ -1,6 +0,0 @@
-@model Bootstrap.Security.BootstrapMenu
-<a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span><i class="fa fa-angle-left"></i></a>
-@if (Model.Menus.Any())
-{
-    @await Html.PartialAsync("SubNavigation", Model.Menus)
-}

Bootstrap.Admin/Views/Shared/_Admin.cshtml

@@ -20,17 +20,16 @@
     <environment include="Development">
         <script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.js"></script>
         <script src="~/lib/signalr/dist/browser/signalr.js"></script>
-        <script src="~/lib/sweetalert/sweetalert2.js" rel="stylesheet"></script>
+        <script src="~/lib/sweetalert/sweetalert2.js"></script>
         <script src="~/lib/nprogress/nprogress.js"></script>
     </environment>
     <environment exclude="Development">
         <script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
         <script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
-        <script src="~/lib/sweetalert/sweetalert2.min.js" rel="stylesheet"></script>
+        <script src="~/lib/sweetalert/sweetalert2.min.js"></script>
         <script src="~/lib/nprogress/nprogress.min.js"></script>
     </environment>
     <script src="~/lib/toastr.js/toastr.min.js"></script>
-    <script src="~/lib/longbow-tree/longbow-tree.js"></script>
     <script src="~/js/common-scripts.js" asp-append-version="true"></script>
     @RenderSection("javascript", false)
     <script src="~/js/log.js" asp-append-version="true"></script>

Bootstrap.Admin/wwwroot/css/blue.css

@@ -94,6 +94,20 @@
     background-color: rgba(84, 189, 220, 0.21);
 }
 
+.sidebar .nav-sidebar > .nav-item > .nav-link.active {
+    background-color: #337ab7;
+}
+
+.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
+.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before
+{
+    background-color: rgba(51, 122, 183, 0.5);
+}
+
+.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"] {
+    color: #fff;
+}
+
 .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
     border-right-color: #305873;
 }

Bootstrap.Admin/wwwroot/css/lte.css

@@ -174,6 +174,24 @@ body {
     color: #fff;
 }
 
+.sidebar .nav-sidebar .has-treeview .nav-link.active {
+    background-color: rgba(60, 141, 188, 0.8);
+}
+
+.sidebar .nav-sidebar > .nav-item > .nav-link.active {
+    background-color: #3c8dbc;
+}
+
+.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
+.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before
+{
+    background-color: rgba(59, 141, 188, 0.7);
+}
+
+.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"] {
+    color: #fff;
+}
+
 .header, aside .nav-brand {
     border-bottom: 1px solid #3c8dbc;
 }

Bootstrap.Admin/wwwroot/css/theme.css

@@ -244,14 +244,6 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
     background: inherit;
 }
 
-    .sidebar .nav-treeview {
-        display: none;
-    }
-
-    .sidebar .menu-open > .nav-treeview {
-        display: block;
-    }
-
     .sidebar .nav-item {
         margin: 2px 10px;
         flex: 1 1 auto;
@@ -277,32 +269,39 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
         margin-right: 0;
     }
 
-    .sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
+    .sidebar .nav-link .fa-angle-left {
-        background-color: rgba(255,255,255,.1);
-    }
-
-    .sidebar .nav-sidebar .nav-item .nav-link.active {
-        background-color: rgba(255,255,255,.1);
-    }
-
-    .sidebar .sub .nav-item .nav-link.active {
-        background-color: inherit;
-        color: #FF6C60;
-    }
-
-    .sidebar .sub .nav-item.has-treeview > .nav-link.active {
-        background-color: inherit;
-    } 
-
-    .sidebar .nav-item .fa-angle-left {
         transition: all .3s linear;
         transform-origin: center;
     }
 
-    .sidebar .nav-item.menu-open > a .fa-angle-left {
+    .sidebar .nav-link:not(.collapsed) .fa-angle-left {
         transform: rotate(-90deg);
     }
 
+    .sidebar .nav-sidebar > .nav-item > .nav-link:hover, 
+    .sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
+    .sidebar .show .nav-item .nav-link:hover:before,
+    .sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before,
+    .sidebar .nav-sidebar .nav-link.active {
+       background-color: rgba(255,255,255,.1);
+    }
+
+    .sidebar .nav-sidebar .show .nav-link, .sidebar .nav-sidebar .collapsing .nav-link {
+        background-color: transparent;
+    }
+
+    .sidebar .sub .nav-item .nav-link:before {
+        background-color: transparent;
+        content: '';
+        position: absolute;
+        left: 10px;
+        right: 10px;
+        border-radius: 4px;
+        z-index: -1;
+        height: 41px;
+        transition: all .3s linear;
+    }
+
 .sidebar-toggle-box {
     display: block;
     font-size: 1.25rem;

Bootstrap.Admin/wwwroot/lib/longbow-tree/longbow-tree.js

@@ -1,157 +0,0 @@
-(function ($) {
-    /**
-     * Constants
-     * ====================================================
-     */
-    var NAME = 'Treeview';
-    var DATA_KEY = 'lte.treeview';
-    var EVENT_KEY = "." + DATA_KEY;
-    var JQUERY_NO_CONFLICT = $.fn[NAME];
-    var Event = {
-        SELECTED: "selected" + EVENT_KEY,
-        EXPANDED: "expanded" + EVENT_KEY,
-        COLLAPSED: "collapsed" + EVENT_KEY,
-        LOAD_DATA_API: "load" + EVENT_KEY
-    };
-    var Selector = {
-        LI: '.nav-item',
-        LINK: '.nav-link',
-        TREEVIEW_MENU: '.nav-treeview',
-        OPEN: '.menu-open',
-        DATA_WIDGET: '[data-widget="treeview"]'
-    };
-    var ClassName = {
-        LI: 'nav-item',
-        LINK: 'nav-link',
-        TREEVIEW_MENU: 'nav-treeview',
-        OPEN: 'menu-open',
-        SHOW: 'show'
-    };
-    var Default = {
-        trigger: Selector.DATA_WIDGET + " " + Selector.LINK,
-        animationSpeed: 300,
-        accordion: true
-        /**
-         * Class Definition
-         * ====================================================
-         */
-
-    };
-
-    var Treeview =
-        /*#__PURE__*/
-        function () {
-            function Treeview(element, config) {
-                this._config = config;
-                this._element = element;
-            } // Public
-
-
-            var _proto = Treeview.prototype;
-
-            _proto.init = function init() {
-                this._setupListeners();
-            };
-
-            _proto.expand = function expand(treeviewMenu, parentLi) {
-                var _this = this;
-
-                var expandedEvent = $.Event(Event.EXPANDED);
-
-                if (this._config.accordion) {
-                    var openMenuLi = parentLi.siblings(Selector.OPEN).first();
-                    var openTreeview = openMenuLi.find(Selector.TREEVIEW_MENU).first();
-                    this.collapse(openTreeview, openMenuLi);
-                }
-
-                parentLi.addClass(ClassName.SHOW);
-                treeviewMenu.slideDown(this._config.animationSpeed, function () {
-                    parentLi.addClass(ClassName.OPEN);
-                    $(_this._element).trigger(expandedEvent);
-                });
-            };
-
-            _proto.collapse = function collapse(treeviewMenu, parentLi) {
-                var _this2 = this;
-
-                var collapsedEvent = $.Event(Event.COLLAPSED);
-                parentLi.removeClass(ClassName.SHOW);
-                treeviewMenu.slideUp(this._config.animationSpeed, function () {
-                    parentLi.removeClass(ClassName.OPEN);
-                    $(_this2._element).trigger(collapsedEvent);
-                    treeviewMenu.find(Selector.OPEN + " > " + Selector.TREEVIEW_MENU).slideUp();
-                    treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN);
-                });
-            };
-
-            _proto.toggle = function toggle(event) {
-                var $relativeTarget = $(event.currentTarget);
-                var treeviewMenu = $relativeTarget.next();
-
-                if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
-                    return;
-                }
-
-                event.preventDefault();
-                var parentLi = $relativeTarget.parents(Selector.LI).first();
-                var isOpen = parentLi.hasClass(ClassName.OPEN);
-                if (isOpen) {
-                    this.collapse($(treeviewMenu), parentLi);
-                } else {
-                    this.expand($(treeviewMenu), parentLi);
-                }
-            } // Private
-                ;
-
-            _proto._setupListeners = function _setupListeners() {
-                var _this3 = this;
-
-                $(document).on('click', this._config.trigger, function (event) {
-                    _this3.toggle(event);
-                });
-            } // Static
-                ;
-
-            Treeview._jQueryInterface = function _jQueryInterface(config) {
-                return this.each(function () {
-                    var data = $(this).data(DATA_KEY);
-
-                    var _config = $.extend({}, Default, $(this).data());
-
-                    if (!data) {
-                        data = new Treeview($(this), _config);
-                        $(this).data(DATA_KEY, data);
-                    }
-
-                    if (config === 'init') {
-                        data[config]();
-                    }
-                });
-            };
-
-            return Treeview;
-        }();
-    /**
-     * Data API
-     * ====================================================
-     */
-
-
-    $(window).on(Event.LOAD_DATA_API, function () {
-        $(Selector.DATA_WIDGET).each(function () {
-            Treeview._jQueryInterface.call($(this), 'init');
-        });
-    });
-    /**
-     * jQuery API
-     * ====================================================
-     */
-
-    $.fn[NAME] = Treeview._jQueryInterface;
-    $.fn[NAME].Constructor = Treeview;
-
-    $.fn[NAME].noConflict = function () {
-        $.fn[NAME] = JQUERY_NO_CONFLICT;
-        return Treeview._jQueryInterface;
-    };
-})(jQuery);

Bootstrap.Admin/wwwroot/lib/longbow/longbow.common.js

@@ -526,13 +526,13 @@
             "hideMethod": "fadeOut"
         };
 
-        $('.collapse').on('shown.bs.collapse', function () {
+        $('body > section .collapse').on('shown.bs.collapse', function () {
             $.footer().removeClass('d-none');
-        }).on('hidden.bs.collapse', function () {
+        }).on('body > section hidden.bs.collapse', function () {
             $.footer().removeClass('d-none');
-        }).on('hide.bs.collapse', function () {
+        }).on('body > section hide.bs.collapse', function () {
             $('footer').addClass('d-none');
-        }).on('show.bs.collapse', function () {
+        }).on('body > section show.bs.collapse', function () {
             $('footer').addClass('d-none');
         });