Question

我正在使用一个名为Metronic的HTML模板为自己构建一个后端。此HTML模板提供了在我选择的模板中折叠边栏的可能性。但是，侧边栏不能保持她的状态。

您可以在此处测试模板：https://keenthemes.com/metronic/preview/?page=index&demo=default

我想对它进行编程，以便在重新加载页面时边栏保持此处状态。我已经找到了名为js.cookie的插件的一些解决方案，可以将侧边栏菜单的状态保存在客户端计算机上。

但是，我面临的问题是我真的不知道为了获取侧边栏的当前状态而必须调用哪个类或ID，并根据此状态和保存到Cookie的状态来切换侧边栏...

这是我到目前为止尝试过的： Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

到目前为止，我的代码：

<script>
    var last=$.cookie('menuToggled');
    console.log(last);

    if (last!=null) {
        //remove default collapse settings
        $("#page-sidebar-menu-ul").removeClass('page-sidebar-menu-closed');
        //show the last visible group
        $("#"+last).collapse("show");
    }

    $("#page-sidebar-menu").bind('shown', function() {
        $.cookie('menuToggled', "page-sidebar-menu")
    });
</script>

我已将ID page-sidebar-menu和page-sidebar-menu-ul分配给模板。在ID page-sidebar-menu上方链接的页面上，m_ver_menu是page-sidebar-menu-ul，ID ul是m_ver_menu元素，后跟ID <html> <head> <title>A Leaflet map!</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script> <style> #map{ height: 100% } </style> </head> <body> <div id="map"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> var southWest = L.latLng(34.072711,31.758391), northEast = L.latLng(36.113055, 35.124228), bounds = L.latLngBounds(southWest, northEast); var counties = $.ajax({ url: "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson", dataType: "json", success: console.log("County data successfully loaded."), error: function(xhr) { alert(xhr.statusText) } }) $.when(counties).done(function() { var map = L.map('map') .setView([35.126411,33.429859], 9); //tiles - http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png var basemap = L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', { attribution: '© <a href="http://info.2gis.com/">2GIS</a> © <a href="https://www.opencartography.com">Open Cartography</a>', subdomains: 'abcd', maxBounds: bounds, maxZoom: 19, minZoom: 9 }).addTo(map); // Add requested external GeoJSON to map var kyCounties = L.geoJSON(counties.responseJSON).addTo(map); var scale = L.control.scale() scale.addTo(map) }); </script> </body> </html>。

我将不胜感激。谢谢！

重新加载页面时保持引导侧栏的状态

0 个答案: