夜间模式2-bootstrap实现
<p>导航条默认白底黑字，夜间是黑底白字，截屏为了演示刻意添加了个自定义背景色
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e3e07374a58d8f68abcce40257c3b27f&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ebd8cce39b3e8d9b76f29fbc07d1f543&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=2aac40d93af45e2b2e09540890e253fe&amp;file=file.png" alt="" /></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0&quot; /&gt;
&lt;title&gt;Documentation&lt;/title&gt;
&lt;link href=&quot;static/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link href=&quot;static/css/bootstrap-icons.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link href=&quot;static/css/swiper.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/css/public.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/css/style.css&quot; /&gt;
&lt;script src=&quot;static/js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;static/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;static/js/swiper.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;static/js/public.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;navbar navbar-expand-lg bg-blues&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;网站LOGO&lt;/a&gt;
&lt;!-- top button only display on small screen --&gt;
&lt;button id=&quot;nav-toggle&quot; class=&quot;navbar-toggler d-lg-none m-2&quot;&gt;&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;&lt;/button&gt;
&lt;button class=&quot;navbar-toggler d-none&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
&lt;ul class=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;blog&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown
&lt;/a&gt;
&lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;hr class=&quot;dropdown-divider&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link disabled&quot; href=&quot;#&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;form class=&quot;d-flex&quot;&gt;
&lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
&lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;hr /&gt;
&lt;div class=&quot;container-fluid mainbox&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-3 d-none d-lg-block site_left&quot;&gt;
&lt;nav id=&quot;sidebar&quot;&gt;
&lt;ul class=&quot;nav flex-column&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Certification&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Release Notes&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Firmware&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;/ul&gt;&lt;!--nav first level ul--&gt;
&lt;/nav&gt;
&lt;/div&gt;&lt;!--site_left--&gt;
&lt;!-- 内容区（示例） --&gt;
&lt;div class=&quot;col-lg-9 site_content&quot;&gt;
&lt;div class=&quot;p-3&quot;&gt;
&lt;h2&gt;页面内容区&lt;/h2&gt;
&lt;p&gt;这里是页面其他内容……&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-4&quot;&gt;
&lt;div class=&quot;card mb-2&quot;&gt;
&lt;img src=&quot;static/images/car.jpg&quot; class=&quot;card-img-top&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;h3 class=&quot;card-title&quot;&gt;VW ID3 Smart Car&lt;/h3&gt;
&lt;p class=&quot;card-content&quot;&gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- inner row--&gt;
&lt;P style=&quot;height: 600PX;&quot;&gt;&lt;/P&gt;
&lt;/div&gt; &lt;!--site_content--&gt;
&lt;/div&gt;&lt;!--row--&gt;
&lt;/div&gt;&lt;!--mainbox--&gt;
&lt;!-- 小屏下的全屏导航 --&gt;
&lt;!-- 注意：在小屏下，通过按钮触发，导航区域会脱离外层容器 --&gt;
&lt;nav id=&quot;sidebar&quot; class=&quot;d-lg-none&quot; style=&quot;width: 700px;&quot;&gt;
&lt;button id=&quot;closenav&quot; class=&quot;btn btn-primary m-2&quot;&gt;Close&lt;/button&gt;
&lt;ul class=&quot;nav flex-column&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;form class=&quot;d-flex&quot;&gt;
&lt;input class=&quot;form-control me-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
&lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
&lt;/form&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Certification&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Release Notes&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Firmware&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;blog&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;Product Categories&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Real IoT Solutions&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;5G&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Edge&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;WisGate Developer&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;nav-link toggle&quot;&gt;WisGate Connect&lt;/a&gt;
&lt;ul class=&quot;submenu&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 41&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;cate 42&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;!--first level end--&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;button id=&quot;themeToggle&quot; class=&quot;btn btn-outline-secondary&quot;&gt;
&lt;i class=&quot;bi&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;a href=&quot;#&quot; id=&quot;scroll-top&quot; class=&quot;scroll-top d-flex align-items-center justify-content-center&quot;&gt;&lt;i class=&quot;bi bi-arrow-up-short&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;script&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<pre><code>@charset &quot;utf-8&quot;;
/* set html font size 10px as the base, 1rem=10px */
html{font-size:10px;}
body{font-size:1.4rem;font-family:Arial, Helvetica, sans-serif; /*padding-top:7rem; background-color: var(--bg-color);color: var(--text-color);*/ transition: all 0.3s ease;}
/* Customize daytime mode style */
[data-bs-theme=light] {
--bs-body-bg: #ffffff; /* 自定义背景色 */
--bs-body-color: #212529; /* 自定义文字颜色 */
--bg-color: #ffffff;
--text-color: #212529;
--sidebar-bg:#f8f9fa;
--card-bg: #f8f9fa;
--bg-blues: #0b7ff3;
}
/* Customize the style of dark night mode */
[data-bs-theme=dark] {
--bs-body-bg: #1a1a1a; /* 自定义背景色 */
--bs-body-color: #e0e0e0; /* 自定义文字颜色 */
--bg-color: #1a1a1a;
--text-color: #f8f9fa;
--sidebar-bg:#2d2d2d;
--card-bg: #2d2d2d;
--bg-blues: #14e695;
}
.bg-blues{background-color: var(--bg-blues);}
/*public tools*/
a{text-decoration:none;font-size:1.4rem;}
ul,li{padding:0; margin:0; list-style:none;}
.bg-gold{background-image: linear-gradient(100deg, #faeac6, #ab8a5f);}
.bg-card{background:#121212;}
/*gold btns used in home news distributors etc.*/
a.abtns{ display:block;width:18rem; height:4.5rem; line-height:4.5rem; margin:0 auto; border:1px solid #a1825a; text-align:center; color:#e4cea4; font-weight:bold; position:relative; overflow:hidden; transition:all .5s;}
a.abtns:hover{background:#a1825a; color:#fff;}
/* atbns sliding background effect, if no need, just removed the css below*/
a.abtns::before,a.abtns::after {content: &quot;&quot;;display: block;width:18rem;height: 100%;background: rgba(250, 234, 198, 0.5);opacity: 0.5;position: absolute;top: 0;left: 0;transform: skewX(-15deg) translateX(-300px);filter: blur(10px);overflow: hidden;}
a.abtns::after {width: 40px;background: rgba(161, 130, 90, 0.3);left: 60px;opacity: 0.5;filter: blur(5px);}
a.abtns:hover::before {transition: 1s;transform: translateX(320px);opacity: 0.7;}
a.abtns:hover::after {transition: 1s;transform: translateX(320px);opacity: 1; }
/* atbns end*/
a.nav-link{ color:var(--text-color);}
/*main frame box layout*/
#sidebar {background:var(--sidebar-bg);height: 100vh; overflow-y: auto; max-width: 300px; transition: transform 0.3s ease;}
#sidebar .submenu {list-style: none;padding-left: 15px;display: none;}
/* add an arrow for a with submenu */
#sidebar .toggle::after {
content: &quot;\25B6&quot;; /* right arrow */
float: right;
transform: rotate(0deg);
transition: transform 0.3s;
}
/* when active,rotate the arrow */
#sidebar .toggle.active::after {
transform: rotate(90deg);
}
/*pc and mobile header*/
/* breadcram navigation*/
.breadnavbg{height:5rem; background:#282828;}
.breadnavbg nav li{color:#fff; line-height:5rem;}
.breadnavbg nav li a{color:#fff; font-size:1.6rem;}
.breadnavbg nav li a.active{color:#dcb878;}
.breadnavbg .breadcrumb-item+.breadcrumb-item::before{color:#fff;}
/*pagination for product list, news list */
.pagenav{ display:flex; justify-content:center; margin:4rem auto 1rem;}
.pagenav .pagination {--bs-pagination-bg:#0b0b0b!important;}
.pagenav .pagination li a{color:#fff;}
.pagenav .pagination .page-link {border-color: #464646;}
.pagenav .page-item .page-link:hover {background-color: inherit;}
.pagenav .pagination .active a.page-link{background:none; color:#dbc395; font-weight:bold;}
/*footer part*/
.footer-top{ background:#1b1b1b; padding-top:6rem; padding-bottom:7rem;}
#themeToggle{position: fixed;right: 10px; bottom: 30px;}
/*-------# Scroll Top Button-----------*/
.scroll-top {position: fixed;visibility: hidden;opacity: 0;right: 10px;bottom: 60px; z-index: 99999;background-color:#403d3d;width: 29px; height: 28px;border-radius: 4px;transition: all 0.4s;}
.scroll-top i {font-size: 20px;color:#fff;line-height: 0;}
.scroll-top:hover {background-color:#ff7302; color:#fff;}
.scroll-top.active {visibility: visible!important;opacity: 1!important;}
/*ipad and mobile*/
@media (max-width: 992px) {
.navbar-toggler-icon{ font-size:1.6rem;}
#sidebar {position: fixed;top: 0;left: 0;transform: translateX(-100%); width: 100%; max-width: 100%; height: 100%;z-index: 1050;}
#sidebar.active {transform: translateX(0);}
}
/*only mobile phone */
@media (max-width: 768px) {
}
</code></pre>
<pre><code>$(function(){
sidebar_toggle();//slide down or up the left side menu on pc;
sidebarmc_toggle();//slide down or up the left side menu on mc/mobile;
day_night_toggle();// day night switch;
hoverdropdown();//slide down the dropdown menu on top navbar when mouse hover
scrolltoTop();//right bottom btn click to scroll to top;
//tabSwtichClick($(&#039;.prodtabs ol li&#039;),$(&#039;.prodtabc .tabc&#039;),&#039;active&#039;);
});
//pc端展开收缩左侧导航slide down or up the left side menu on pc;
function sidebar_toggle(){
// 点击含有下级菜单的链接时，切换显示/隐藏子菜单
$(&#039;#sidebar .toggle&#039;).click(function(e){
e.preventDefault(); // 阻止默认链接行为
$(this).toggleClass(&#039;active&#039;); // 改变箭头方向
$(this).next(&#039;.submenu&#039;).slideToggle();
});
}
//手机端显示隐藏左侧导航slide down or up the left side menu on mc/mobile;
function sidebarmc_toggle(){
// 小屏下点击顶部按钮显示/隐藏全屏导航
$(&#039;#nav-toggle&#039;).click(function(){
$(&#039;#sidebar.d-lg-none&#039;).toggleClass(&#039;active&#039;);
});
//close nav on mobile
$(&#039;#closenav&#039;).click(function(){
$(&#039;#sidebar.d-lg-none&#039;).toggleClass(&#039;active&#039;);
});
// 可选：在小屏下点击导航外区域时自动关闭导航
$(document).click(function(e){
if($(window).width() &lt; 992) {
if(!$(e.target).closest(&#039;#sidebar, #nav-toggle&#039;).length){
$(&#039;#sidebar.d-lg-none&#039;).removeClass(&#039;active&#039;);
}
}
});
}
/*navigation*/
//when mouse is hover the nav, slidedown the dropdown menu
function hoverdropdown(){
$(&#039;.navbar .dropdown&#039;).hover(function() {
$(this).find(&#039;.dropdown-menu&#039;).first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find(&#039;.dropdown-menu&#039;).first().stop(true, true).delay(100).slideUp();
});
$(&#039;.navbar .dropdown &gt; a&#039;).click(function(){
location.href = this.href;
});
}
//scroll to top
function scrolltoTop(){
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 100) {
$(&#039;.scroll-top&#039;).addClass(&#039;active&#039;);
} else {
$(&#039;.scroll-top&#039;).removeClass(&#039;active&#039;);
}
});
}
//tabs switch when mouse hover, change the tabs
function tabSwtich(m,c,a){
var change=function(i){
m.each(function(index){
index==i?$(this).addClass(a):$(this).removeClass(a);
})
c.each(function(index){
index==i?$(this).show():$(this).hide();
});
};
m.each(function(i){
$(this).mouseenter(function(){
change(i);
});
})
}
//tabs switch when mouse click, change the tab
function tabSwtichClick(m,c,a){
var change=function(i){
m.each(function(index){
index==i?$(this).addClass(a):$(this).removeClass(a);
})
c.each(function(index){
index==i?$(this).show():$(this).hide();
});
};
m.each(function(i){
$(this).click(function(){
change(i);
});
})
}
//day night switch;
function day_night_toggle() {
// Initialize theme (prioritize reading local storage)
const savedTheme = localStorage.getItem(&#039;theme&#039;) || &#039;light&#039;;
$(&#039;html&#039;).attr(&#039;data-bs-theme&#039;, savedTheme);
updateButtonIcon(savedTheme);
// Switch button click event
$(&#039;#themeToggle&#039;).on(&#039;click&#039;, function() {
const currentTheme = $(&#039;html&#039;).attr(&#039;data-bs-theme&#039;);
const newTheme = currentTheme === &#039;light&#039; ? &#039;dark&#039; : &#039;light&#039;;
// Update attributes and storage
$(&#039;html&#039;).attr(&#039;data-bs-theme&#039;, newTheme);
localStorage.setItem(&#039;theme&#039;, newTheme);
updateButtonIcon(newTheme);
});
}
// sun and moon icon switching
function updateButtonIcon(theme) {
$(&#039;#themeToggle&#039;)
.removeClass(&#039;bi-sun-fill bi-moon-fill&#039;)
.addClass(theme === &#039;dark&#039; ? &#039;bi-moon-fill&#039; : &#039;bi-sun-fill&#039;);
}
</code></pre>