2023年6月6日 12:51:35go评论68阅读模式

英文:

Sidebar collapsed on page load making click twice to open the menu

问题

我正在使用边栏展开/折叠菜单。我需要在页面加载时隐藏它，但是当我使用jQuery $(".page-container").addClass("sidebar-collapsed") 这样做时，第一次打开它需要点击两次，之后它会按预期工作。

需要帮助解决这个问题。我已经添加了一个工作示例。

var toggle = true;
$(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;)
$(&quot;.sidebar-icon&quot;).click(function() {
    if (toggle)
    {
    $(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;).removeClass(&quot;sidebar-collapsed-back&quot;);
    $(&quot;#menu span&quot;).css({&quot;position&quot;:&quot;absolute&quot;});
    }
    else
    {
    $(&quot;.page-container&quot;).removeClass(&quot;sidebar-collapsed&quot;).addClass(&quot;sidebar-collapsed-back&quot;);
    setTimeout(function() {
        $(&quot;#menu span&quot;).css({&quot;position&quot;:&quot;relative&quot;});
    }, 400);
    }
    toggle = !toggle;
});

这是你的代码的JavaScript部分的翻译。

英文:

I am using the sidebar expand/collapse menu. I need to hide it on pageload but when I doing it using jquery $(".page-container").addClass("sidebar-collapsed") I have to click twice to open it for the first time after that it works as expected.

Need help with this. I have added working example as well.

var toggle = true;
$(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;)
$(&quot;.sidebar-icon&quot;).click(function() {
    if (toggle)
    {
    $(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;).removeClass(&quot;sidebar-collapsed-back&quot;);
    $(&quot;#menu span&quot;).css({&quot;position&quot;:&quot;absolute&quot;});
    }
    else
    {
    $(&quot;.page-container&quot;).removeClass(&quot;sidebar-collapsed&quot;).addClass(&quot;sidebar-collapsed-back&quot;);
    setTimeout(function() {
        $(&quot;#menu span&quot;).css({&quot;position&quot;:&quot;relative&quot;});
    }, 400);
    }
    toggle = !toggle;
});

.page-container.sidebar-collapsed {
padding-right: 0;
transition: all 100ms linear;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back {
padding-right: 0;
transition: all 100ms linear;
}

.page-container.sidebar-collapsed .sidebar-menu {
width: 75px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .sidebar-menu {
width: 280px;
transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed .sidebar-icon {
transform: rotate(90deg);
transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed-back .sidebar-icon {
transform: rotate(0deg);
transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed .logo {
padding: 20px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .logo {
width: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}

.page-container.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}

.page-container.sidebar-collapsed #menu span {
opacity: 0;
transition: all 50ms linear;
}

.page-container.sidebar-collapsed-back #menu span {
opacity: 1;
transition: all 200ms linear;
transition-delay: 300ms;
padding-left: 10px;
}

.sidebar-menu {
position: fixed;
float: left;
width: 280px;
top: 0;
left: 0;
bottom: 0;
background-color: #5B79A1;
color: #fff;
z-index: 1031;
}

#menu {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}

#menu li {
position: relative;
margin: 0;
margin-top: 25px;
padding: 0;
}

#menu li ul {
opacity: 0;
height: 0px;
}

#menu li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 10px 0 10px 15px;
color: #fff;
white-space: nowrap;
z-index: 2;
font-size: 20px;
}

#menu li a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.25);
transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
text-decoration: none;
}

#menu li.active &gt; a {
background-color: #2b303a;
color: #ffffff;
}

#menu ul li { 
    background-color: #2b303a; 
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu li ul {
position: absolute;
visibility: hidden;
left: 100%;
top: -1px;
background-color: #2b303a;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.1s linear;
border-top: 1px solid rgba(69, 74, 84, 0.7);
}

#menu li:hover &gt; ul {
visibility: visible;
opacity: 1;
}

#menu li li ul {
left: 100%;
visibility: hidden;
top: -1px;
opacity: 0;
transition: opacity 0.1s linear;
}

#menu li li:hover ul {
visibility: visible;
opacity: 1;
}

#menu .fa { margin-right: 5px; }

.logo {
width: 100%;
box-sizing: border-box;
}

.sidebar-icon {
float: right;
font-size: 25px;
color: #D0D5DD;
margin-top: -10px;
position: relative;
}

&lt;script src=&quot;https://code.jquery.com/jquery-3.6.4.slim.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;page-container&quot;&gt;
&lt;div class=&quot;sidebar-menu&quot;&gt;
&lt;div class=&quot;logo&quot;&gt; 
&lt;a href=&quot;#&quot; class=&quot;sidebar-icon&quot;&gt;&lt;svg width=&quot;37&quot; height=&quot;26&quot; viewBox=&quot;0 0 37 26&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M27.6667 9.33333H2M35 2H2M35 16.6667H2M27.6667 24H2&quot; stroke=&quot;white&quot; stroke-width=&quot;3&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;/a&gt; 
&lt;/div&gt;
&lt;div class=&quot;menu&quot;&gt;
&lt;ul id=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;36&quot; height=&quot;33&quot; viewBox=&quot;0 0 36 33&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M15.0051 31.5649V29.7669C15.0051 28.8132 14.6339 27.8986 13.9731 27.2242C13.3122 26.5499 12.4159 26.171 11.4814 26.171H4.4339C3.49935 26.171 2.60307 26.5499 1.94224 27.2242C1.28141 27.8986 0.910156 28.8132 0.910156 29.7669V31.5649M11.4814 18.9792C11.4814 20.9652 9.90376 22.5751 7.95765 22.5751C6.01153 22.5751 4.4339 20.9652 4.4339 18.9792C4.4339 16.9932 6.01153 15.3833 7.95765 15.3833C9.90376 15.3833 11.4814 16.9932 11.4814 18.9792Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71232&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M34.386 31.5649V29.7669C34.386 28.8132 34.0147 27.8986 33.3539 27.2242C32.6931 26.5499 31.7968 26.171 30.8622 26.171H23.8148C22.8802 26.171 21.9839 26.5499 21.3231 27.2242C20.6623 27.8986 20.291 28.8132 20.291 29.7669V31.5649M30.8622 18.9792C30.8622 20.9652 29.2846 22.5751 27.3385 22.5751C25.3924 22.5751 23.8148 20.9652 23.8148 18.9792C23.8148 16.9932 25.3924 15.3833 27.3385 15.3833C29.2846 15.3833 30.8622 16.9932 30.8622 18.9792Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71232&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M32.624 6.09421C32.626 6.88523 32.4449 7.66555 32.0954 8.37161C31.681 9.21769 31.044 9.92934 30.2557 10.4268C29.4674 10.9243 28.5589 11.188 27.632 11.1884C26.8568 11.1905 26.0922 11.0056 25.4003 10.649L22.0527 11.7877L23.1686 8.37161C22.8191 7.66555 22.638 6.88523 22.64 6.09421C22.6404 5.14834 22.8988 4.22125 23.3863 3.41679C23.8738 2.61233 24.5712 1.96226 25.4003 1.5394C26.0922 1.18277 26.8568 0.997955 27.632 1.00002H27.9256C29.1497 1.06893 30.3059 1.59619 31.1728 2.48084C32.0397 3.36549 32.5564 4.54536 32.624 5.79455V6.09421Z&quot; stroke=&quot;white&quot; stroke-width=&quot;0.933995&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M2.67292 6.09421C2.6709 6.88522 2.85201 7.66554 3.20148 8.37161C3.61586 9.21769 4.25288 9.92934 5.0412 10.4268C5.82952 10.9243 6.738 11.188 7.66489 11.1884C8.44003 11.1905 9.20469 11.0056 9.89659 10.649L13.2441 11.7877L12.1283 8.37161C12.4778 7.66554 12.6589 6.88522 12.6569 6.09421C12.6565 5.14834 12.3981 4.22125 11.9106 3.41679C11.4231 2.61233 10.7257 1.96226 9.89659 1.5394C9.20469 1.18277 8.44003 0.997955 7.66489 1.00002H7.37124C6.14713 1.06893 4.99093 1.59619 4.12403 2.48084C3.25714 3.36549 2.74046 4.54536 2.67292 5.79455V6.09421Z&quot; stroke=&quot;white&quot; stroke-width=&quot;0.933995&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Counseling&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;27&quot; viewBox=&quot;0 0 24 27&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M22.6111 25.6401V23.0134C22.6111 21.6201 22.0576 20.2839 21.0724 19.2987C20.0872 18.3135 18.751 17.7601 17.3577 17.7601H6.85101C5.45773 17.7601 4.12152 18.3135 3.13633 19.2987C2.15113 20.2839 1.59766 21.6201 1.59766 23.0134V25.6401M17.3577 7.25335C17.3577 10.1547 15.0057 12.5067 12.1044 12.5067C9.20302 12.5067 6.85101 10.1547 6.85101 7.25335C6.85101 4.35201 9.20302 2 12.1044 2C15.0057 2 17.3577 4.35201 17.3577 7.25335Z&quot; stroke=&quot;white&quot; stroke-width=&quot;2.62668&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Coaching&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;29&quot; height=&quot;28&quot; viewBox=&quot;0 0 29 28&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M21.7879 7.68604H14.1466C13.64 7.68604 13.1541 7.8873 12.7958 8.24555C12.4376 8.6038 12.2363 9.0897 12.2363 9.59635V24.8788C12.2363 25.3855 12.4376 25.8714 12.7958 26.2296C13.1541 26.5879 13.64 26.7891 14.1466 26.7891H25.6085C26.1151 26.7891 26.601 26.5879 26.9593 26.2296C27.3175 25.8714 27.5188 25.3855 27.5188 24.8788V13.417M21.7879 7.68604L27.5188 13.417M21.7879 7.68604V13.417H27.5188M23.6982 18.1927H16.0569M23.6982 22.0134H16.0569M17.9673 14.3721H16.0569&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M20.8336 5.77578C20.8336 5.26913 20.6323 4.78324 20.2741 4.42498C19.9158 4.06673 19.4299 3.86547 18.9233 3.86547H10.3269L8.41656 1H3.64078C3.13413 1 2.64824 1.20126 2.28999 1.55952C1.93173 1.91777 1.73047 2.40366 1.73047 2.91031V16.2825C1.73047 16.7891 1.93173 17.275 2.28999 17.6333C2.64824 17.9915 3.13413 18.1928 3.64078 18.1928H10.3269&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Application&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;29&quot; viewBox=&quot;0 0 24 29&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M13.275 2H4.19262C3.50439 2 2.84435 2.26919 2.3577 2.74835C1.87105 3.22752 1.59766 3.8774 1.59766 4.55504V24.9953C1.59766 25.673 1.87105 26.3229 2.3577 26.802C2.84435 27.2812 3.50439 27.5504 4.19262 27.5504H19.7624C20.4506 27.5504 21.1106 27.2812 21.5973 26.802C22.0839 26.3229 22.3573 25.673 22.3573 24.9953V10.9426M13.275 2L22.3573 10.9426M13.275 2V10.9426H22.3573&quot; stroke=&quot;white&quot; stroke-width=&quot;2.04403&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M8.78364 12.3799V23.5582M11.4451 14.4123H7.45289C6.95878 14.4123 6.48491 14.5997 6.13552 14.9332C5.78613 15.2667 5.58984 15.719 5.58984 16.1907C5.58984 16.6623 5.78613 17.1147 6.13552 17.4482C6.48491 17.7817 6.95878 17.969 7.45289 17.969H10.1144C10.6085 17.969 11.0824 18.1564 11.4318 18.4899C11.7812 18.8234 11.9774 19.2757 11.9774 19.7474C11.9774 20.219 11.7812 20.6714 11.4318 21.0049C11.0824 21.3384 10.6085 21.5258 10.1144 21.5258H5.58984&quot; stroke=&quot;white&quot; stroke-width=&quot;1.02202&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Financial&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;39&quot; height=&quot;30&quot; viewBox=&quot;0 0 39 30&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M16.3818 15.546L13.0697 3.67821L14.7861 3.6152L23.0362 16.2794L23.3194 16.7141L23.8383 16.7131L32.6456 16.6963L32.6456 16.6963L32.6556 16.6962C33.2862 16.6884 33.7448 16.9174 34.1216 17.4345C34.5003 17.9545 34.6086 18.5161 34.4225 19.2107C34.3161 19.6076 34.1116 19.9075 33.794 20.1435C33.4619 20.3893 33.1004 20.5126 32.6821 20.5207L5.40794 20.584L3.41488 13.3678L4.2755 13.4287L6.20821 16.3522L6.49234 16.782L7.00756 16.7806L15.4644 16.7579L16.7191 16.7545L16.3818 15.546Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot;/&gt;
&lt;path d=&quot;M5.00195 27.0103H34.0129&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Pre-Departure&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;36&quot; height=&quot;33&quot; viewBox=&quot;0 0 36 33&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M16.5254 15.3966L8.43488 7.97995L9.69228 7.1319L21.8994 12.8301L22.3226 13.0277L22.7186 12.7802L29.3778 8.61835L29.3778 8.61839L29.3854 8.61354C29.8569 8.31197 30.3092 8.26951 30.8356 8.48253C31.3649 8.69674 31.7098 9.06888 31.8954 9.68021C32.0014 10.0292 31.9879 10.3507 31.8592 10.6774C31.7242 11.0182 31.5098 11.2805 31.1985 11.4826L10.5872 24.376L5.69177 19.8641L6.35842 19.5119L9.19512 20.8128L9.6166 21.0061L10.0096 20.7601L16.4007 16.7589L17.3578 16.1597L16.5254 15.3966Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71928&quot;/&gt;
&lt;path d=&quot;M5.53125 31.218H31.3977&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71928&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Post-Departure&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

答案1

得分: 1

将您的开关设置为false，因为如果它是true，它只会向已经折叠的菜单添加一个侧边栏折叠状态。

var toggle = false;
$(".page-container").addClass("sidebar-collapsed")
$(".sidebar-icon").click(function() {
  if (toggle) {
    $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
    $("#menu span").css({
      "position": "absolute"
    });
  } else {
    $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
    setTimeout(function() {
      $("#menu span").css({
        "position": "relative"
      });
    }, 400);
  }
  toggle = !toggle;
});

.page-container.sidebar-collapsed {
  padding-right: 0;
  transition: all 100ms linear;
  transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back {
  padding-right: 0;
  transition: all 100ms linear;
}

/* ...（省略了其他CSS样式）... */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<div class="page-container">
  <div class="sidebar-menu">
    <div class="logo">
      <a href="#" class="sidebar-icon">
        <svg width="37" height="26" viewBox="0 0 37 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M27.6667 9.33333H2M35 2H2M35 16.6667H2M27.6667 24H2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
    </div>
    <div class="menu">
      <ul id="menu">
        <!-- 此处省略了其他菜单项的HTML代码 -->
      </ul>
    </div>
  </div>
</div>

英文:

Make your toggle to false because if it's true, it will just add a sidebar-collapsed state to an already collapsed menu.

var toggle = false;
$(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;)
$(&quot;.sidebar-icon&quot;).click(function() {
if (toggle) {
$(&quot;.page-container&quot;).addClass(&quot;sidebar-collapsed&quot;).removeClass(&quot;sidebar-collapsed-back&quot;);
$(&quot;#menu span&quot;).css({
&quot;position&quot;: &quot;absolute&quot;
});
} else {
$(&quot;.page-container&quot;).removeClass(&quot;sidebar-collapsed&quot;).addClass(&quot;sidebar-collapsed-back&quot;);
setTimeout(function() {
$(&quot;#menu span&quot;).css({
&quot;position&quot;: &quot;relative&quot;
});
}, 400);
}
toggle = !toggle;
});

.page-container.sidebar-collapsed {
padding-right: 0;
transition: all 100ms linear;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back {
padding-right: 0;
transition: all 100ms linear;
}
.page-container.sidebar-collapsed .sidebar-menu {
width: 75px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back .sidebar-menu {
width: 280px;
transition: all 100ms ease-in-out;
}
.page-container.sidebar-collapsed .sidebar-icon {
transform: rotate(90deg);
transition: all 300ms ease-in-out;
}
.page-container.sidebar-collapsed-back .sidebar-icon {
transform: rotate(0deg);
transition: all 300ms ease-in-out;
}
.page-container.sidebar-collapsed .logo {
padding: 20px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed-back .logo {
width: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.page-container.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.page-container.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.page-container.sidebar-collapsed #menu span {
opacity: 0;
transition: all 50ms linear;
}
.page-container.sidebar-collapsed-back #menu span {
opacity: 1;
transition: all 200ms linear;
transition-delay: 300ms;
padding-left: 10px;
}
.sidebar-menu {
position: fixed;
float: left;
width: 280px;
top: 0;
left: 0;
bottom: 0;
background-color: #5B79A1;
color: #fff;
z-index: 1031;
}
#menu {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#menu li {
position: relative;
margin: 0;
margin-top: 25px;
padding: 0;
}
#menu li ul {
opacity: 0;
height: 0px;
}
#menu li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 10px 0 10px 15px;
color: #fff;
white-space: nowrap;
z-index: 2;
font-size: 20px;
}
#menu li a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.25);
transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
text-decoration: none;
}
#menu li.active&gt;a {
background-color: #2b303a;
color: #ffffff;
}
#menu ul li {
background-color: #2b303a;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li ul {
position: absolute;
visibility: hidden;
left: 100%;
top: -1px;
background-color: #2b303a;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.1s linear;
border-top: 1px solid rgba(69, 74, 84, 0.7);
}
#menu li:hover&gt;ul {
visibility: visible;
opacity: 1;
}
#menu li li ul {
left: 100%;
visibility: hidden;
top: -1px;
opacity: 0;
transition: opacity 0.1s linear;
}
#menu li li:hover ul {
visibility: visible;
opacity: 1;
}
#menu .fa {
margin-right: 5px;
}
.logo {
width: 100%;
box-sizing: border-box;
}
.sidebar-icon {
float: right;
font-size: 25px;
color: #D0D5DD;
margin-top: -10px;
position: relative;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.6.4.slim.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;page-container&quot;&gt;
&lt;div class=&quot;sidebar-menu&quot;&gt;
&lt;div class=&quot;logo&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;sidebar-icon&quot;&gt;&lt;svg width=&quot;37&quot; height=&quot;26&quot; viewBox=&quot;0 0 37 26&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M27.6667 9.33333H2M35 2H2M35 16.6667H2M27.6667 24H2&quot; stroke=&quot;white&quot; stroke-width=&quot;3&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;menu&quot;&gt;
&lt;ul id=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;36&quot; height=&quot;33&quot; viewBox=&quot;0 0 36 33&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M15.0051 31.5649V29.7669C15.0051 28.8132 14.6339 27.8986 13.9731 27.2242C13.3122 26.5499 12.4159 26.171 11.4814 26.171H4.4339C3.49935 26.171 2.60307 26.5499 1.94224 27.2242C1.28141 27.8986 0.910156 28.8132 0.910156 29.7669V31.5649M11.4814 18.9792C11.4814 20.9652 9.90376 22.5751 7.95765 22.5751C6.01153 22.5751 4.4339 20.9652 4.4339 18.9792C4.4339 16.9932 6.01153 15.3833 7.95765 15.3833C9.90376 15.3833 11.4814 16.9932 11.4814 18.9792Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71232&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M34.386 31.5649V29.7669C34.386 28.8132 34.0147 27.8986 33.3539 27.2242C32.6931 26.5499 31.7968 26.171 30.8622 26.171H23.8148C22.8802 26.171 21.9839 26.5499 21.3231 27.2242C20.6623 27.8986 20.291 28.8132 20.291 29.7669V31.5649M30.8622 18.9792C30.8622 20.9652 29.2846 22.5751 27.3385 22.5751C25.3924 22.5751 23.8148 20.9652 23.8148 18.9792C23.8148 16.9932 25.3924 15.3833 27.3385 15.3833C29.2846 15.3833 30.8622 16.9932 30.8622 18.9792Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71232&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M32.624 6.09421C32.626 6.88523 32.4449 7.66555 32.0954 8.37161C31.681 9.21769 31.044 9.92934 30.2557 10.4268C29.4674 10.9243 28.5589 11.188 27.632 11.1884C26.8568 11.1905 26.0922 11.0056 25.4003 10.649L22.0527 11.7877L23.1686 8.37161C22.8191 7.66555 22.638 6.88523 22.64 6.09421C22.6404 5.14834 22.8988 4.22125 23.3863 3.41679C23.8738 2.61233 24.5712 1.96226 25.4003 1.5394C26.0922 1.18277 26.8568 0.997955 27.632 1.00002H27.9256C29.1497 1.06893 30.3059 1.59619 31.1728 2.48084C32.0397 3.36549 32.5564 4.54536 32.624 5.79455V6.09421Z&quot; stroke=&quot;white&quot; stroke-width=&quot;0.933995&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M2.67292 6.09421C2.6709 6.88522 2.85201 7.66554 3.20148 8.37161C3.61586 9.21769 4.25288 9.92934 5.0412 10.4268C5.82952 10.9243 6.738 11.188 7.66489 11.1884C8.44003 11.1905 9.20469 11.0056 9.89659 10.649L13.2441 11.7877L12.1283 8.37161C12.4778 7.66554 12.6589 6.88522 12.6569 6.09421C12.6565 5.14834 12.3981 4.22125 11.9106 3.41679C11.4231 2.61233 10.7257 1.96226 9.89659 1.5394C9.20469 1.18277 8.44003 0.997955 7.66489 1.00002H7.37124C6.14713 1.06893 4.99093 1.59619 4.12403 2.48084C3.25714 3.36549 2.74046 4.54536 2.67292 5.79455V6.09421Z&quot; stroke=&quot;white&quot; stroke-width=&quot;0.933995&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Counseling&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;27&quot; viewBox=&quot;0 0 24 27&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M22.6111 25.6401V23.0134C22.6111 21.6201 22.0576 20.2839 21.0724 19.2987C20.0872 18.3135 18.751 17.7601 17.3577 17.7601H6.85101C5.45773 17.7601 4.12152 18.3135 3.13633 19.2987C2.15113 20.2839 1.59766 21.6201 1.59766 23.0134V25.6401M17.3577 7.25335C17.3577 10.1547 15.0057 12.5067 12.1044 12.5067C9.20302 12.5067 6.85101 10.1547 6.85101 7.25335C6.85101 4.35201 9.20302 2 12.1044 2C15.0057 2 17.3577 4.35201 17.3577 7.25335Z&quot; stroke=&quot;white&quot; stroke-width=&quot;2.62668&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Coaching&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;29&quot; height=&quot;28&quot; viewBox=&quot;0 0 29 28&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M21.7879 7.68604H14.1466C13.64 7.68604 13.1541 7.8873 12.7958 8.24555C12.4376 8.6038 12.2363 9.0897 12.2363 9.59635V24.8788C12.2363 25.3855 12.4376 25.8714 12.7958 26.2296C13.1541 26.5879 13.64 26.7891 14.1466 26.7891H25.6085C26.1151 26.7891 26.601 26.5879 26.9593 26.2296C27.3175 25.8714 27.5188 25.3855 27.5188 24.8788V13.417M21.7879 7.68604L27.5188 13.417M21.7879 7.68604V13.417H27.5188M23.6982 18.1927H16.0569M23.6982 22.0134H16.0569M17.9673 14.3721H16.0569&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M20.8336 5.77578C20.8336 5.26913 20.6323 4.78324 20.2741 4.42498C19.9158 4.06673 19.4299 3.86547 18.9233 3.86547H10.3269L8.41656 1H3.64078C3.13413 1 2.64824 1.20126 2.28999 1.55952C1.93173 1.91777 1.73047 2.40366 1.73047 2.91031V16.2825C1.73047 16.7891 1.93173 17.275 2.28999 17.6333C2.64824 17.9915 3.13413 18.1928 3.64078 18.1928H10.3269&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Application&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;29&quot; viewBox=&quot;0 0 24 29&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M13.275 2H4.19262C3.50439 2 2.84435 2.26919 2.3577 2.74835C1.87105 3.22752 1.59766 3.8774 1.59766 4.55504V24.9953C1.59766 25.673 1.87105 26.3229 2.3577 26.802C2.84435 27.2812 3.50439 27.5504 4.19262 27.5504H19.7624C20.4506 27.5504 21.1106 27.2812 21.5973 26.802C22.0839 26.3229 22.3573 25.673 22.3573 24.9953V10.9426M13.275 2L22.3573 10.9426M13.275 2V10.9426H22.3573&quot; stroke=&quot;white&quot; stroke-width=&quot;2.04403&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;path d=&quot;M8.78364 12.3799V23.5582M11.4451 14.4123H7.45289C6.95878 14.4123 6.48491 14.5997 6.13552 14.9332C5.78613 15.2667 5.58984 15.719 5.58984 16.1907C5.58984 16.6623 5.78613 17.1147 6.13552 17.4482C6.48491 17.7817 6.95878 17.969 7.45289 17.969H10.1144C10.6085 17.969 11.0824 18.1564 11.4318 18.4899C11.7812 18.8234 11.9774 19.2757 11.9774 19.7474C11.9774 20.219 11.7812 20.6714 11.4318 21.0049C11.0824 21.3384 10.6085 21.5258 10.1144 21.5258H5.58984&quot; stroke=&quot;white&quot; stroke-width=&quot;1.02202&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Financial&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;39&quot; height=&quot;30&quot; viewBox=&quot;0 0 39 30&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M16.3818 15.546L13.0697 3.67821L14.7861 3.6152L23.0362 16.2794L23.3194 16.7141L23.8383 16.7131L32.6456 16.6963L32.6456 16.6963L32.6556 16.6962C33.2862 16.6884 33.7448 16.9174 34.1216 17.4345C34.5003 17.9545 34.6086 18.5161 34.4225 19.2107C34.3161 19.6076 34.1116 19.9075 33.794 20.1435C33.4619 20.3893 33.1004 20.5126 32.6821 20.5207L5.40794 20.584L3.41488 13.3678L4.2755 13.4287L6.20821 16.3522L6.49234 16.782L7.00756 16.7806L15.4644 16.7579L16.7191 16.7545L16.3818 15.546Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot;/&gt;
&lt;path d=&quot;M5.00195 27.0103H34.0129&quot; stroke=&quot;white&quot; stroke-width=&quot;1.91031&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Pre-Departure&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;svg width=&quot;36&quot; height=&quot;33&quot; viewBox=&quot;0 0 36 33&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;path d=&quot;M16.5254 15.3966L8.43488 7.97995L9.69228 7.1319L21.8994 12.8301L22.3226 13.0277L22.7186 12.7802L29.3778 8.61835L29.3778 8.61839L29.3854 8.61354C29.8569 8.31197 30.3092 8.26951 30.8356 8.48253C31.3649 8.69674 31.7098 9.06888 31.8954 9.68021C32.0014 10.0292 31.9879 10.3507 31.8592 10.6774C31.7242 11.0182 31.5098 11.2805 31.1985 11.4826L10.5872 24.376L5.69177 19.8641L6.35842 19.5119L9.19512 20.8128L9.6166 21.0061L10.0096 20.7601L16.4007 16.7589L17.3578 16.1597L16.5254 15.3966Z&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71928&quot;/&gt;
&lt;path d=&quot;M5.53125 31.218H31.3977&quot; stroke=&quot;white&quot; stroke-width=&quot;1.71928&quot;/&gt;
&lt;/svg&gt;
&lt;span&gt;Post-Departure&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

加载页面时侧边栏折叠，需要点击两次才能打开菜单。

问题

答案1

如何在Express中处理未知路由

Chart.js 3.7.1 移除左侧带有数值的刻度。

Bootstrap 5与e-junkie购物车不兼容。

如何在CSS中使用响应式布局填充旋转背景？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论