如何使用一些热键隐藏标题和侧边栏
Posted
技术标签:
【中文标题】如何使用一些热键隐藏标题和侧边栏【英文标题】：How to Hide Header and Sidebar using some Hot key 【发布时间】：2021-03-31 00:02:56 【问题描述】：我有一个 aspx 页面，其中包含标题、侧边栏和主要内容。我想知道如何使用一些热键（F2键）来隐藏标题和侧边栏，当我隐藏标题和侧边栏时，主要内容应该自动调整。
请检查我的以下标记并建议如何执行此操作：
<body runat="server" id="body">
<form id="form1" runat="server">
<nav class="navbar fixed-top" id="navbar">
<div class="navbar-brand">
<button type="button" class="navbar-toggler" id="collapse-button" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="logo">
<h3><a href="<%= ResolveUrl("~/") %>" target="_top">KH MIS Dashboard</a></h3>
<h4><a style="color:dodgerblue" id="dashid" href="<%= ResolveUrl("~/") %>" target="_bottom"></a></h4>
</div>
</div>
<div class="navbar-nav flex-row nav-header">
<a class="nav-item nav-link d-none d-md-block"></a>
<a class="nav-item nav-link d-none d-md-block"><%= Session["UserName"] %></a>
<a class="nav-item nav-link d-none d-md-block" href="<%= DemoUtils.TryUrl %>"></a>
<a class="nav-item nav-link d-none d-md-block" href=FrmLogout.aspx>Logout</a>
<a class="nav-item nav-link" href="javascript:void(0);" id="settingsButton"><span class="icon icon-settings"></span></a>
</div>
</nav>
<div class="main">
<demo:SideBar runat="server"></demo:SideBar>
<section id="submenubar" class="d-none d-lg-block" runat="server">
<dx:BootstrapMenu runat="server" ID="subMenu" Orientation="Vertical" ClientIDMode="Static" SyncSelectionMode="None" EnableClientSideAPI="true">
<ItemTemplate>
<a href="#<%# Container.Item.Name%>" class="nav-link" id="">
<span><%# Container.Item.Text %></span>
<%# GetBadgeMarkup((BootstrapMenuItem)Container.Item) %>
</a>
</ItemTemplate>
</dx:BootstrapMenu>
</section>
<section id="content">
<dx:BootstrapCallbackPanel ID="MainCallbackPanel" ClientInstanceName="callbackPanel" runat="server" OnCallback="MainCallbackPanel_Callback" Width="100%" Height="100%" class="theme-dx-office-white">
<ContentCollection>
<dx:ContentControl runat="server"></dx:ContentControl>
</ContentCollection>
<ClientSideEvents EndCallback="OnEndCallback"/>
</dx:BootstrapCallbackPanel>
</section>
<section id="settingsbar">
<h5>Color Themes</h5>
<dx:BootstrapMenu runat="server" ID="themesMenu" ClientIDMode="Static" AllowSelectItem="true">
<ClientSideEvents ItemClick="dxbsDemo.onThemeMenuClick" />
</dx:BootstrapMenu>
</section>
</div>
</form>
</body>
【问题讨论】：
***.com/questions/424407/… 【参考方案1】：您可以在 F1-F12 键处创建与字符代码关联的事件并调用函数。
//F9 - F12 example
document.addEventListener("keydown", function(event)
event.preventDefault();
switch (event.which)
case 120:
setMessage("You just pressed F9!");
break;
case 121:
setMessage("You just pressed F10!");
break;
case 122:
setMessage("You just pressed F11!");
break;
case 123:
setMessage("You just pressed F12!");
break;
function setMessage(msg)
document.querySelector('.demo').innerhtml = msg;
【讨论】：
以上代码仅用于事件处理。我想知道如何使用您提供的上述代码隐藏标题和侧栏。以上是关于如何使用一些热键隐藏标题和侧边栏的主要内容，如果未能解决你的问题，请参考以下文章