导航到其他模块时保留导航栏隐藏/显示

编程问答 2022-06-09

问题描述

导航到其他模块时如何保留导航栏（最小位置）。 Collapsed Navigation Bar

sidebar-collapse如果导航到其他页面，则不会保留。

解决方法

当您移至其他位置时，是否要让导航栏从大变小？

（对不起，我还不能发表评论）。

,

当您移至其他位置时，是否要让导航栏从大变小？如果添加一些代码，总是很好：）

const menuToggle = document.querySelector('.menu-toggle');
const mainUl = document.querySelector(".main-ul");
const navBtn = document.querySelectorAll(".nav-a");

// Open and close meny on click
menuToggle.addEventListener("click",function () {
  menuToggle.classList.toggle("open");
  mainUl.classList.toggle("open");
});

// Close menu when clicked on an a-tag in the menu
navBtn.forEach((button) => {
  button.addEventListener("click",function () {
    navBtn.forEach((button) => button.classList.remove("active"));
    this.classList.add("active");
    mainUl.classList.toggle("open");
    menuToggle.classList.toggle("open");
  });
});
,

这是我创建的演示和源代码

https://minhhungit.github.io/2020/10/16/011-keep-menu-toggle-state-after-page-reload/ 

namespace J {
    export function storageSet(name,val) {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem(name,val);
        } else {
            //window.alert('Please use a modern browser to properly view this template!');
        }
    }

    export function storageGet(name) {
        if (typeof (Storage) !== "undefined") {
            return localStorage.getItem(name);
        } else {
            return null;
        }
    }
}

在_Layout.cshtml中输入以下代码

<script type="text/javascript">
  $().ready(function () {
      new DailyTimelog.Common.SidebarSearch($('#SidebarSearch'),$('#SidebarMenu')).init();
      // ...
      // ...
      $(window).bind("load resize layout",doLayout);
      doLayout();
  });
  </script>

  // Add these lines
  <script type="text/javascript">
      let sidebarToggleButton = $('.main-header .sidebar-toggle');
      if (sidebarToggleButton) {
          $(sidebarToggleButton).on('click',function (e) {
              e.preventDefault();
              let isSidebarCollapse = $('body').hasClass('sidebar-collapse');
              J.storageSet('IS_SIDEBAR_COLLAPSE',!isSidebarCollapse);
          });
      }
  </script>

和LeftNavigation.cshtml 

<script type="text/javascript">
    function openWindow(url,width,height) {
        height = height || (screen.availHeight - 60);
        // ...
        // ...
    }
    
    // Add these lines
    let isSidebarCollapseCache = J.storageGet('IS_SIDEBAR_COLLAPSE');
    if (isSidebarCollapseCache == 'true') {
        $('body').toggleClass('sidebar-collapse',true);
    }
    else {
        $('body').toggleClass('sidebar-collapse',false);
    }
</script>

``

,

@minhhungit谢谢您的演示。

我使用了类似于ThemePreference的cookie实现。

Views / Shared / _Layout.cshtml 

var theme = !themeCookie.IsEmptyOrNull() ? themeCookie : "blue";
// Add following lines
var sbNavCookie = Context.Request.Cookies["SBNavigationPreference"];
var sbNav = !sbNavCookie.IsEmptyOrNull() && sbNavCookie == "true" ? true : false;

在身体标签中，

<body ... class="...@(sbNav?" sidebar-collapse":"")">

在脚本标签中，

<script type="text/javascript">
    $().ready(function () {
// Add new lines
        let sidebarToggleButton = $('.main-header .sidebar-toggle');
        if (sidebarToggleButton) {
          $(sidebarToggleButton).on('click',function (e) {
              e.preventDefault();
              let isSidebarCollapse = $('body').hasClass('sidebar-collapse');
              $.cookie('SBNavigationPreference',!isSidebarCollapse,{
                  path: Q.Config.applicationPath,expires: 365
              });
          });
      }
cookiescookiesjavascriptrazorrazorrazorserenity-platform