首頁猿問默認側邊欄收起

默認側邊欄收起

JavaScript

長風秋雁 2022-07-21 09:55:38

我是 Web 應用程序的新手，所以我對 HTML、CSS 和 JS 的了解還不足以自己處理問題。我按照一些 YT 教程創建了可折疊的側邊欄，但我不知道為什么它默認折疊并且我無法打開它。我認為問題在于我不知道我的代碼到底發生了什么。你能告訴我我做錯了什么并幫助我理解這應該如何工作嗎？HTML：<div id="wrapper"> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li> <a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <i class="fa fa-fw fa-gamepad"></i> Select something</a> <ul class="collapse list-unstyled"> <li> <a href="#">Link1</a> </li> <li> <a href="#">Link2</a> </li> <li> <a href="#">Link3</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-fw fa-home"></i> Home</a> </li> <li> <a href="#"><i class="fa fa-fw fa-user"></i> My profile</a> </li> <li> <a href="#"><i class="fa fa-fw fa-question-circle"></i> FAQ</a> </li> <li> <a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a> </li> <li> <a href="#"><i class="fa fa-fw fa-sign-out-alt"></i> Logout</a> </li> </ul> </div>  <div id="page-content-wrapper">  </div></div>CSS：#sidebar-wrapper{ z-index: 1; position: fixed; width: 0; height: 100%; overflow-y: hidden; transition: 0.15s; background-color: var(--black) ; font-size: 1em;}#sidebar-wrapper .sidebar-header { padding: 20px; background: var(--black);}#page-content-wrapper{ width: 100%; position: absolute; padding: 15px; transition: 0.15s; color: black;}#wrapper.menuDisplayed #sidebar-wrapper{ width: 250px;}#wrapper.menuDisplayed #page-content-wrapper { padding-left: 250px;}

查看完整描述

3 回答

莫回無

TA貢獻1865條經驗獲得超7個贊

好的，我會告訴你如何實現你想要的（2 種方法），然后我會解釋你的代碼是如何工作的。

方法一

在您的第一個 div ( #wrapper) 中，添加類menuDisplayed：

方法二

您還可以更改您的 CSS 以執行您想要的操作，并使“顯示的菜單”成為默認樣式：

在整個代碼中將“menuDisplayed”替換為“menuHidden”，使其在語義上繼續有意義

更新樣式以#sidebar-wrapper賦予其寬度 0 以外的值。

#sidebar-wrapper{

z-index: 1;

position: fixed;

width: 250px;

height: 100%;

overflow-y: hidden;

transition: 0.15s;

background-color: var(--black) ;

font-size: 1em;

}

現在也更改樣式#page-content-wrapper，以便為側邊欄留出空間：

#page-content-wrapper{

width: 100%;

position: absolute;

padding: 15px;

padding-left: 250px; /* leaving 250px of space on the left */

transition: 0.15s;

color: black;

}

下一步是使封閉的側邊欄具有正確的樣式：

#wrapper.menuHidden #sidebar-wrapper{

width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */

}

#wrapper.menuHidden #page-content-wrapper {

padding-left: unset; /* clears the attribute that gave space to the sidebar */

}

現在我將解釋您的代碼是如何工作的（在您更改側邊欄行為之前）：

你的 CSS 告訴瀏覽器帶有sidebar-wrapperid 的元素應該有空寬度（所以它不會在你加載頁面后立即出現），但它也說帶有 id 的元素sidebar-wrapper在另一個元素內部時應該是 250px 寬wrapperid 和menuDisplayed班級。

menuDisplay魔法就在你的 javascript 中：它告訴瀏覽器用id切換元素的類wrapper，這會激活 CSS 樣式，使你的側邊欄寬 250 像素，然后它就會出現。再次切換時，menuDisplayed該類將從具有 id 的元素中刪除，wrapper并且您的側邊欄返回寬度等于 0。

使用 jQuery為$("#menu-toggle").click“click”事件添加事件偵聽器。當這個事件被觸發時（有人點擊了帶有 id 的元素menu-toggle），回調函數被執行：

function(e){

e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)

$("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'

}

反對回復 2022-07-21

眼眸繁星

TA貢獻1873條經驗獲得超9個贊

您最初可以將類添加menuDisplayed到導航欄（使用 id #wrapper），因此在頁面加載時，它將被顯示。

<div id="wrapper" class="menuDisplayed">

反對回復 2022-07-21

一只名叫tom的貓

TA貢獻1906條經驗獲得超3個贊

您應該將課程添加menuDisplayed到您的#wrapper. 然后它可以默認顯示。

<div id="wrapper" class="menuDisplayed">

完整的例子可以在這里找到：http: //jsfiddle.net/9ojvnutc/

反對回復 2022-07-21

3 回答
0 關注
152 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

默認側邊欄收起

默認側邊欄收起

3 回答

添加回答