javascript - 使用 Javascript 调整 SVG 图标的大小
问题描述
在#pageListdiv 元素中，包含六个链接，当用户单击.togglePL按钮时，div 元素会折叠以仅显示 SVG 图标。
当#pageList元素未折叠时，SVG 图标设置为固定宽度和高度 20。
当用户折叠 div 以仅显示图标时，SVG 图标看起来非常小，很难在屏幕上看到。
Javascript代码中是否有任何方法可以将图标保持在20的固定宽度和高度，即使元素#pageList是否折叠？
我曾尝试在 JS 中的 else 括号内运行这一行，但没有成功：$('.togglePL a svg').css({width:'20', height:'20'});
请在此处找到附加的代码：
// ~ Copyright (c) Summit Learning Management System (made by students, for students). 2021.
// Toggle Page List
$(document).ready(function() {
$('.togglePL').click(function(e) {
if ($('#pageList').width() == 40) {
$('.textPL').show();
$('#pageList').width(164);
$('.togglePL').css({left:'180px', transform: 'none'});
}
else {
$('.textPL').hide();
$('#pageList').width(40);
$('.togglePL').css({left:'56px', transform: 'rotate(180deg)', transitionDuration:'0.3s'});
}
});
});
$(document).on('keydown', function (e) {
let keyCode = e.keyCode | e.which;
if (e.altKey && keyCode == 80) {
$('.togglePL').trigger('click')
}
})html > body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
}
#wrapper {
display: flex;
flex-wrap: nowrap;
height: 100%;
min-height: 100vh;
overflow: hidden;
}
/* Navigation */
#navigation {
display: flex;
flex-direction: column;
min-height: 100%;
width: 32px;
padding: 8px 0;
background: #1b315e;
}
#navigation > .spacer {
display: block;
flex: 1;
}
#navigation > a {
display: block;
margin: 0;
padding: 28px 0;
text-align: center;
}
#navigation > a.active {
border-left: 2px solid #fff;
background: #15274b;
}
#navigation > a:not(.active):hover {
border-left: 2px solid #fff;
background: #15274b;
transition-duration: 0.3s;
opacity: 0.75;
}
#navigation > .navLinks {
cursor: pointer;
display: block;
margin: 0;
height: 48px;
background: none;
border: none;
outline: none;
text-align: center;
}
#navigation > .navLinks:hover {
background: #15274b;
transition-duration: 0.3s;
}
/* Page List */
#pageList {
display: flex;
flex-direction: column;
min-height: 100%;
width: 164px;
padding: 8px 0;
justify-content: center;
background: #15274b;
}
#pageList::before {
left: 188px;
background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent);
}
#pageList::after {
left: 24px;
background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent);
}
#pageList::before, #pageList::after {
content: '';
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
width: 8px;
opacity: 0.5;
}
#pageList > a {
display: flex;
margin: 0;
padding: 28px 14px;
align-items: center;
text-transform: uppercase;
text-decoration: none;
font-size: 8pt;
color: #fff;
}
#pageList > a > .textPL {
margin-left: 8px;
}
#pageList > a.active {
border-left: 2px solid #fff;
background: #101d38;
font-weight: 700;
}
#pageList > a:not(.active):hover {
border-left: 2px solid #fff;
background: #101d38;
transition-duration: 0.3s;
opacity: 0.75;
}
#pageList > .togglePL {
cursor: pointer;
display: block;
position: absolute;
top: 8px;
left: 180px;
height: 30px;
width: 30px;
background: #101d38;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 100%;
text-align: center;
}<!DOCTYPE html>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2021.
-->
<html lang="en-AU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>Welcome — Summit — University of Newcastle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- External Script -->
<link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <!-- Internal Stylesheet -->
<link rel="stylesheet" type="text/css" href="../CSS/styling.css"> <!-- Internal Stylesheet -->
<link rel="shortcut icon" href="#"> <!-- Favicon -->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="navigation">
<div class="spacer"></div>
<!-- Home Workspace -->
<a href="#" title="Home workspace" class="active">
<svg width="22" height="22" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64 .3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96 .3V319.88a16.05 16.05 0 0 0-15.95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path>
</g>
</g>
</svg>
</a>
<!-- Learning Workspace -->
<a href="#" title="Learning workspace">
<svg width="22" height="22" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M356 160H188c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12zm12 52v-8c0-6.6-5.4-12-12-12H188c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12zm64.7 268h3.3c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H80c-44.2 0-80-35.8-80-80V80C0 35.8 35.8 0 80 0h344c13.3 0 24 10.7 24 24v368c0 10-6.2 18.6-14.9 22.2-3.6 16.1-4.4 45.6-.4 65.8zM128 384h288V32H128v352zm-96 16c13.4-10 30-16 48-16h16V32H80c-26.5 0-48 21.5-48 48v320zm372.3 80c-3.1-20.4-2.9-45.2 0-64H80c-64 0-64 64 0 64h324.3z"></path>
</g>
</g>
</svg>
</a>
<!-- Student Management Workspace -->
<a href="#" title="Student management workspace">
<svg width="22" height="22" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path>
</g>
</g>
</svg>
</a>
<!-- Portal Workspace -->
<a href="#" title="Portal workspace">
<svg width="22" height="22" viewBox="0 0 496 512">
<g style="fill: #fff;">
<g>
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm193.2 152h-82.5c-9-44.4-24.1-82.2-43.2-109.1 55 18.2 100.2 57.9 125.7 109.1zM336 256c0 22.9-1.6 44.2-4.3 64H164.3c-2.7-19.8-4.3-41.1-4.3-64s1.6-44.2 4.3-64h167.4c2.7 19.8 4.3 41.1 4.3 64zM248 40c26.9 0 61.4 44.1 78.1 120H169.9C186.6 84.1 221.1 40 248 40zm-67.5 10.9c-19 26.8-34.2 64.6-43.2 109.1H54.8c25.5-51.2 70.7-90.9 125.7-109.1zM32 256c0-22.3 3.4-43.8 9.7-64h90.5c-2.6 20.5-4.2 41.8-4.2 64s1.5 43.5 4.2 64H41.7c-6.3-20.2-9.7-41.7-9.7-64zm22.8 96h82.5c9 44.4 24.1 82.2 43.2 109.1-55-18.2-100.2-57.9-125.7-109.1zM248 472c-26.9 0-61.4-44.1-78.1-120h156.2c-16.7 75.9-51.2 120-78.1 120zm67.5-10.9c19-26.8 34.2-64.6 43.2-109.1h82.5c-25.5 51.2-70.7 90.9-125.7 109.1zM363.8 320c2.6-20.5 4.2-41.8 4.2-64s-1.5-43.5-4.2-64h90.5c6.3 20.2 9.7 41.7 9.7 64s-3.4 43.8-9.7 64h-90.5z"></path>
</g>
</g>
</svg>
</a>
<!-- Administration Workspace -->
<a href="#" title="Administration workspace">
<svg width="22" height="22" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path>
</g>
</g>
</svg>
</a>
<div class="spacer"></div>
<!-- Help -->
<button title="Help" class="navLinks">
<svg width="16" height="16" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path>
</g>
</g>
</svg>
</button>
<!-- Quick Links -->
<button title="Quick links" class="navLinks">
<svg width="16" height="16" viewBox="0 0 384 512">
<g style="fill: #fff;">
<g>
<path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path>
</g>
</g>
</svg>
</button>
<!-- Log Out -->
<button title="Log out" class="navLinks">
<svg width="16" height="16" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M160 217.1c0-8.8 7.2-16 16-16h144v-93.9c0-7.1 8.6-10.7 13.6-5.7l141.6 143.1c6.3 6.3 6.3 16.4 0 22.7L333.6 410.4c-5 5-13.6 1.5-13.6-5.7v-93.9H176c-8.8 0-16-7.2-16-16v-77.7m-32 0v77.7c0 26.5 21.5 48 48 48h112v61.9c0 35.5 43 53.5 68.2 28.3l141.7-143c18.8-18.8 18.8-49.2 0-68L356.2 78.9c-25.1-25.1-68.2-7.3-68.2 28.3v61.9H176c-26.5 0-48 21.6-48 48zM0 112v288c0 26.5 21.5 48 48 48h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48C21.5 64 0 85.5 0 112z"></path>
</g>
</g>
</svg>
</button>
</div>
<!-- Page List -->
<div id="pageList">
<!-- Summit Messages -->
<a href="#" title="Summit messages">
<svg width="20" height="20" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M569.9 441.1c-.5-.4-22.6-24.2-37.9-54.9 27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25zM155.4 314l-13.2-3-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6zm289.8 100.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34.5 75.4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4z"></path>
</g>
</g>
</svg>
<span class="textPL">Summit Messages</span>
</a>
<!-- Dashboard -->
<a href="#" title="Dashboard">
<svg width="20" height="20" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M504 416H32V72c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v360c0 8.84 7.16 16 16 16h488c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM98.34 263.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l72.69-72.01 84.69 84.69c6.25 6.25 16.38 6.25 22.63 0l93.53-93.53 44.04 44.04c4.95 4.95 11.03 7.16 17 7.16 12.48 0 24.46-9.7 24.46-24.34V112.19c0-8.94-7.25-16.19-16.19-16.19H344.34c-21.64 0-32.47 26.16-17.17 41.46l44.71 44.71-82.22 82.22-84.63-84.63c-6.23-6.23-16.32-6.25-22.57-.05l-84.12 83.32zM362.96 128H448v85.04L362.96 128z"></path>
</g>
</g>
</svg>
<span class="textPL">Dashboard</span>
</a>
<!-- Help -->
<a href="#" title="Help">
<svg width="20" height="20" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path>
</g>
</g>
</svg>
<span class="textPL">Help</span>
</a>
<!-- Notices -->
<a href="#" title="Notices">
<svg width="20" height="20" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M552 64H88c-13.234 0-24 10.767-24 24v8H24c-13.255 0-24 10.745-24 24v280c0 26.51 21.49 48 48 48h504c13.233 0 24-10.767 24-24V88c0-13.233-10.767-24-24-24zM32 400V128h32v272c0 8.822-7.178 16-16 16s-16-7.178-16-16zm512 16H93.258A47.897 47.897 0 0 0 96 400V96h448v320zm-404-96h168c6.627 0 12-5.373 12-12V140c0-6.627-5.373-12-12-12H140c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12zm20-160h128v128H160V160zm-32 212v-8c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H140c-6.627 0-12-5.373-12-12zm224 0v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-128v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"></path>
</g>
</g>
</svg>
<span class="textPL">Notices</span>
</a>
<!-- Timetable -->
<a href="#" title="Timetable">
<svg width="20" height="20" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"></path>
</g>
</g>
</svg>
<span class="textPL">Timetable</span>
</a>
<!-- Welcome -->
<a href="#" title="Welcome" class="active">
<svg width="20" height="20" viewBox="0 0 640 512">
<g style="fill: #fff;">
<g>
<path d="M638.9 209.7l-8-13.9c-2.2-3.8-7.1-5.1-10.9-2.9l-108 63V240c0-26.5-21.5-48-48-48H320v62.2c0 16-10.9 30.8-26.6 33.3-20 3.3-37.4-12.2-37.4-31.6v-94.3c0-13.8 7.1-26.6 18.8-33.9l33.4-20.9c11.4-7.1 24.6-10.9 38.1-10.9h103.2l118.5-67c3.8-2.2 5.2-7.1 3-10.9l-8-14c-2.2-3.8-7.1-5.2-10.9-3l-111 63h-94.7c-19.5 0-38.6 5.5-55.1 15.8l-33.5 20.9c-17.5 11-28.7 28.6-32.2 48.5l-62.5 37c-21.6 13-35.1 36.7-35.1 61.9v38.6L4 357.1c-3.8 2.2-5.2 7.1-3 10.9l8 13.9c2.2 3.8 7.1 5.2 10.9 3L160 305.3v-57.2c0-14 7.5-27.2 19.4-34.4l44.6-26.4v65.9c0 33.4 24.3 63.3 57.6 66.5 38.1 3.7 70.4-26.3 70.4-63.7v-32h112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-24v36c0 19.8-16 35.8-35.8 35.8h-16.1v16c0 22.2-18 40.2-40.2 40.2H238.5l-115.6 67.3c-3.8 2.2-5.1 7.1-2.9 10.9l8 13.8c2.2 3.8 7.1 5.1 10.9 2.9L247.1 448h100.8c34.8 0 64-24.8 70.8-57.7 30.4-6.7 53.3-33.9 53.3-66.3v-4.7c13.6-2.3 24.6-10.6 31.8-21.7l132.2-77c3.8-2.2 5.1-7.1 2.9-10.9z"></path>
</g>
</g>
</svg>
<span class="textPL">Welcome</span>
</a>
<button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL">
<svg width="10" height="10" viewBox="0 0 256 512">
<g style="fill: #fff;">
<g>
<path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path>
</g>
</g>
</svg>
</button>
</div>
</div>
<script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script -->
</body>
</html>谢谢
解决方案
它根据其容器的宽度获取宽度，您需要设置以50使用$('#pageList').width(50);更好的 SVG 图标大小。
或者在侧边栏折叠时简单地添加自定义类，然后减少填充a为 SVG 图标腾出一些空间。喜欢：
#pageList.opened a{
padding: 28px 8px;
}
// Toggle Page List
$(document).ready(function() {
$('.togglePL').click(function(e) {
if ($('#pageList').width() == 40) {
$('.textPL').show();
$('#pageList').width(164).removeClass('opened');
$('.togglePL').css({left:'180px', transform: 'none'});
}
else {
$('.textPL').hide();
$('#pageList').width(40).addClass('opened');
$('.togglePL').css({left:'56px', transform: 'rotate(180deg)', transitionDuration:'0.3s'});
}
});
});
$(document).on('keydown', function (e) {
let keyCode = e.keyCode | e.which;
if (e.altKey && keyCode == 80) {
$('.togglePL').trigger('click')
}
})html > body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
}
#wrapper {
display: flex;
flex-wrap: nowrap;
height: 100%;
min-height: 100vh;
overflow: hidden;
}
/* Navigation */
#navigation {
display: flex;
flex-direction: column;
min-height: 100%;
width: 32px;
padding: 8px 0;
background: #1b315e;
}
#navigation > .spacer {
display: block;
flex: 1;
}
#navigation > a {
display: block;
margin: 0;
padding: 28px 0;
text-align: center;
}
#navigation > a.active {
border-left: 2px solid #fff;
background: #15274b;
}
#navigation > a:not(.active):hover {
border-left: 2px solid #fff;
background: #15274b;
transition-duration: 0.3s;
opacity: 0.75;
}
#navigation > .navLinks {
cursor: pointer;
display: block;
margin: 0;
height: 48px;
background: none;
border: none;
outline: none;
text-align: center;
}
#navigation > .navLinks:hover {
background: #15274b;
transition-duration: 0.3s;
}
/* Page List */
#pageList {
display: flex;
flex-direction: column;
min-height: 100%;
width: 164px;
padding: 8px 0;
justify-content: center;
background: #15274b;
}
#pageList::before {
left: 188px;
background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent);
}
#pageList::after {
left: 24px;
background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent);
}
#pageList::before, #pageList::after {
content: '';
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
width: 8px;
opacity: 0.5;
}
#pageList > a {
display: flex;
margin: 0;
padding: 28px 14px;
align-items: center;
text-transform: uppercase;
text-decoration: none;
font-size: 8pt;
color: #fff;
}
#pageList > a > .textPL {
margin-left: 8px;
}
#pageList > a.active {
border-left: 2px solid #fff;
background: #101d38;
font-weight: 700;
}
#pageList > a:not(.active):hover {
border-left: 2px solid #fff;
background: #101d38;
transition-duration: 0.3s;
opacity: 0.75;
}
#pageList > .togglePL {
cursor: pointer;
display: block;
position: absolute;
top: 8px;
left: 180px;
height: 30px;
width: 30px;
background: #101d38;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 100%;
text-align: center;
}
#pageList.opened a{
padding: 28px 8px;
}<!DOCTYPE html>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2021.
-->
<html lang="en-AU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>Welcome — Summit — University of Newcastle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- External Script -->
<link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <!-- Internal Stylesheet -->
<link rel="stylesheet" type="text/css" href="../CSS/styling.css"> <!-- Internal Stylesheet -->
<link rel="shortcut icon" href="#"> <!-- Favicon -->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="navigation">
<div class="spacer"></div>
<!-- Home Workspace -->
<a href="#" title="Home workspace" class="active">
<svg width="22" height="22" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64 .3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96 .3V319.88a16.05 16.05 0 0 0-15.95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path>
</g>
</g>
</svg>
</a>
<!-- Learning Workspace -->
<a href="#" title="Learning workspace">
<svg width="22" height="22" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M356 160H188c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12zm12 52v-8c0-6.6-5.4-12-12-12H188c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12zm64.7 268h3.3c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H80c-44.2 0-80-35.8-80-80V80C0 35.8 35.8 0 80 0h344c13.3 0 24 10.7 24 24v368c0 10-6.2 18.6-14.9 22.2-3.6 16.1-4.4 45.6-.4 65.8zM128 384h288V32H128v352zm-96 16c13.4-10 30-16 48-16h16V32H80c-26.5 0-48 21.5-48 48v320zm372.3 80c-3.1-20.4-2.9-45.2 0-64H80c-64 0-64 64 0 64h324.3z"></path>
</g>
</g>
</svg>
</a>
<!-- Student Management Workspace -->
<a href="#" title="Student management workspace">
<svg width="22" height="22" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path>
</g>
</g>
</svg>
</a>
<!-- Portal Workspace -->
<a href="#" title="Portal workspace">
<svg width="22" height="22" viewBox="0 0 496 512">
<g style="fill: #fff;">
<g>
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm193.2 152h-82.5c-9-44.4-24.1-82.2-43.2-109.1 55 18.2 100.2 57.9 125.7 109.1zM336 256c0 22.9-1.6 44.2-4.3 64H164.3c-2.7-19.8-4.3-41.1-4.3-64s1.6-44.2 4.3-64h167.4c2.7 19.8 4.3 41.1 4.3 64zM248 40c26.9 0 61.4 44.1 78.1 120H169.9C186.6 84.1 221.1 40 248 40zm-67.5 10.9c-19 26.8-34.2 64.6-43.2 109.1H54.8c25.5-51.2 70.7-90.9 125.7-109.1zM32 256c0-22.3 3.4-43.8 9.7-64h90.5c-2.6 20.5-4.2 41.8-4.2 64s1.5 43.5 4.2 64H41.7c-6.3-20.2-9.7-41.7-9.7-64zm22.8 96h82.5c9 44.4 24.1 82.2 43.2 109.1-55-18.2-100.2-57.9-125.7-109.1zM248 472c-26.9 0-61.4-44.1-78.1-120h156.2c-16.7 75.9-51.2 120-78.1 120zm67.5-10.9c19-26.8 34.2-64.6 43.2-109.1h82.5c-25.5 51.2-70.7 90.9-125.7 109.1zM363.8 320c2.6-20.5 4.2-41.8 4.2-64s-1.5-43.5-4.2-64h90.5c6.3 20.2 9.7 41.7 9.7 64s-3.4 43.8-9.7 64h-90.5z"></path>
</g>
</g>
</svg>
</a>
<!-- Administration Workspace -->
<a href="#" title="Administration workspace">
<svg width="22" height="22" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path>
</g>
</g>
</svg>
</a>
<div class="spacer"></div>
<!-- Help -->
<button title="Help" class="navLinks">
<svg width="16" height="16" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path>
</g>
</g>
</svg>
</button>
<!-- Quick Links -->
<button title="Quick links" class="navLinks">
<svg width="16" height="16" viewBox="0 0 384 512">
<g style="fill: #fff;">
<g>
<path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path>
</g>
</g>
</svg>
</button>
<!-- Log Out -->
<button title="Log out" class="navLinks">
<svg width="16" height="16" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M160 217.1c0-8.8 7.2-16 16-16h144v-93.9c0-7.1 8.6-10.7 13.6-5.7l141.6 143.1c6.3 6.3 6.3 16.4 0 22.7L333.6 410.4c-5 5-13.6 1.5-13.6-5.7v-93.9H176c-8.8 0-16-7.2-16-16v-77.7m-32 0v77.7c0 26.5 21.5 48 48 48h112v61.9c0 35.5 43 53.5 68.2 28.3l141.7-143c18.8-18.8 18.8-49.2 0-68L356.2 78.9c-25.1-25.1-68.2-7.3-68.2 28.3v61.9H176c-26.5 0-48 21.6-48 48zM0 112v288c0 26.5 21.5 48 48 48h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48C21.5 64 0 85.5 0 112z"></path>
</g>
</g>
</svg>
</button>
</div>
<!-- Page List -->
<div id="pageList">
<!-- Summit Messages -->
<a href="#" title="Summit messages">
<svg width="20" height="20" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M569.9 441.1c-.5-.4-22.6-24.2-37.9-54.9 27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25zM155.4 314l-13.2-3-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6zm289.8 100.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34.5 75.4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4z"></path>
</g>
</g>
</svg>
<span class="textPL">Summit Messages</span>
</a>
<!-- Dashboard -->
<a href="#" title="Dashboard">
<svg width="20" height="20" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M504 416H32V72c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v360c0 8.84 7.16 16 16 16h488c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM98.34 263.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l72.69-72.01 84.69 84.69c6.25 6.25 16.38 6.25 22.63 0l93.53-93.53 44.04 44.04c4.95 4.95 11.03 7.16 17 7.16 12.48 0 24.46-9.7 24.46-24.34V112.19c0-8.94-7.25-16.19-16.19-16.19H344.34c-21.64 0-32.47 26.16-17.17 41.46l44.71 44.71-82.22 82.22-84.63-84.63c-6.23-6.23-16.32-6.25-22.57-.05l-84.12 83.32zM362.96 128H448v85.04L362.96 128z"></path>
</g>
</g>
</svg>
<span class="textPL">Dashboard</span>
</a>
<!-- Help -->
<a href="#" title="Help">
<svg width="20" height="20" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path>
</g>
</g>
</svg>
<span class="textPL">Help</span>
</a>
<!-- Notices -->
<a href="#" title="Notices">
<svg width="20" height="20" viewBox="0 0 576 512">
<g style="fill: #fff;">
<g>
<path d="M552 64H88c-13.234 0-24 10.767-24 24v8H24c-13.255 0-24 10.745-24 24v280c0 26.51 21.49 48 48 48h504c13.233 0 24-10.767 24-24V88c0-13.233-10.767-24-24-24zM32 400V128h32v272c0 8.822-7.178 16-16 16s-16-7.178-16-16zm512 16H93.258A47.897 47.897 0 0 0 96 400V96h448v320zm-404-96h168c6.627 0 12-5.373 12-12V140c0-6.627-5.373-12-12-12H140c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12zm20-160h128v128H160V160zm-32 212v-8c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H140c-6.627 0-12-5.373-12-12zm224 0v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-128v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"></path>
</g>
</g>
</svg>
<span class="textPL">Notices</span>
</a>
<!-- Timetable -->
<a href="#" title="Timetable">
<svg width="20" height="20" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"></path>
</g>
</g>
</svg>
<span class="textPL">Timetable</span>
</a>
<!-- Welcome -->
<a href="#" title="Welcome" class="active">
<svg width="20" height="20" viewBox="0 0 640 512">
<g style="fill: #fff;">
<g>
<path d="M638.9 209.7l-8-13.9c-2.2-3.8-7.1-5.1-10.9-2.9l-108 63V240c0-26.5-21.5-48-48-48H320v62.2c0 16-10.9 30.8-26.6 33.3-20 3.3-37.4-12.2-37.4-31.6v-94.3c0-13.8 7.1-26.6 18.8-33.9l33.4-20.9c11.4-7.1 24.6-10.9 38.1-10.9h103.2l118.5-67c3.8-2.2 5.2-7.1 3-10.9l-8-14c-2.2-3.8-7.1-5.2-10.9-3l-111 63h-94.7c-19.5 0-38.6 5.5-55.1 15.8l-33.5 20.9c-17.5 11-28.7 28.6-32.2 48.5l-62.5 37c-21.6 13-35.1 36.7-35.1 61.9v38.6L4 357.1c-3.8 2.2-5.2 7.1-3 10.9l8 13.9c2.2 3.8 7.1 5.2 10.9 3L160 305.3v-57.2c0-14 7.5-27.2 19.4-34.4l44.6-26.4v65.9c0 33.4 24.3 63.3 57.6 66.5 38.1 3.7 70.4-26.3 70.4-63.7v-32h112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-24v36c0 19.8-16 35.8-35.8 35.8h-16.1v16c0 22.2-18 40.2-40.2 40.2H238.5l-115.6 67.3c-3.8 2.2-5.1 7.1-2.9 10.9l8 13.8c2.2 3.8 7.1 5.1 10.9 2.9L247.1 448h100.8c34.8 0 64-24.8 70.8-57.7 30.4-6.7 53.3-33.9 53.3-66.3v-4.7c13.6-2.3 24.6-10.6 31.8-21.7l132.2-77c3.8-2.2 5.1-7.1 2.9-10.9z"></path>
</g>
</g>
</svg>
<span class="textPL">Welcome</span>
</a>
<button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL">
<svg width="10" height="10" viewBox="0 0 256 512">
<g style="fill: #fff;">
<g>
<path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path>
</g>
</g>
</svg>
</button>
</div>
</div>
<script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script -->
</body>
</html>推荐阅读
- c# - 如何检测用户在 ListBox win 表单中单击的项目
- infowindow - 使用 osmdroid 显示多个 InfoWindows
- java - graphql错误字段查询的类型对象需要子选择
- javascript - 如果表单在角度上是动态的，如何设置表单控件的初始值？
- r - 为长数据库转换宽，在 R 中对变量进行分组
- c++ - OpenCV 尝试使用 windows 显示图像抛出异常
- swift - AudioKit 中的交叉淡入淡出循环
- javascript - 从 10 进制转换为 2 到 36 之间的任意进制
- file - 如何使用golang rest api将文件或图像路径url返回到forntend？
- python - 如何使用默认值从 PySpark 数据帧访问 JSON 值？