Open leepiny opened 4 years ago
-if...else的運用對我來說比較容易理解,在操作上沒有太大的問題。 -但還需要牢記一些規定樣式: -ex 替字串增加文字時是classList 不是classnameList
\\首先要var的值 var toggle = document.getElementsByClassName("icon icon-toggle-menu")[0] var navbar = document.getElementsByClassName("navbar-nav")[0] \\ 後方[0]中的數字要對應你在HTML中,所需要選取的項目是第幾個位數。 if(document.body.clientWidth < 500){ toggle.classList.add("active") }else{ toggle.classList.remove("active") } if(document.body.clientWidth < 500){ navbar.classList.add("collapse") }else{ navbar.classList.remove("collapse") }
-這是在運用function時,比起上次的數字練習有點轉換不過來, -還不是很能搞懂function的運用時機,和程式碼應該打在哪邊的窘境。 -另外思考模式方面還無法快速的轉換為程式碼,這部分可能需要未來多加練習。
var toggle = document.getElementsByClassName("icon icon-toggle-menu")[0] var navbar = document.getElementsByClassName("navbar-nav")[0] \\新增兩個要var的值 var navsub = document.getElementsByClassName("nav-link nav-sub-menu")[0] var drop = document.getElementsByClassName("nav-dropdown-menu")[0] toggle.addEventListener("click" , function(){ navbar.classList.toggle("active") }) navsub.addEventListenet("click" , function(){ drop.classList.toggle("active") })
運用addEventListener( )
最後一個步驟是監聽整個網頁視窗大小,運用監聽模式去監聽size的變化。
以下完成整個練習項目的程式碼:
window.addEventListener("resize",function(){ if(document.body.clientWidth < 500){ toggle.classList.add("active") }else{ toggle.classList.remove("active") } if(document.body.clientWidth < 500){ navbar.classList.add("collapse") }else{ navbar.classList.remove("collapse") } }) toggle.addEventListener("click",function(){ navbar.classList.toggle("active") }) navsub.addEventListener("click",function(){ drop.classList.toggle("active") })
if(document.body.clientWidth < 500){ toggle.classList.add("active")
\這邊是運用add讓HTML加入字串“active”讓目標出現。
navsub.addEventListener("click",function(){ drop.classList.toggle("active")
\為何這邊是使用toggle的方式讓目標“active”出現呢?
JavaScript & Bootstrap 的實作練習
本次作業要讓網頁上方的navbar能監聽視窗的大小,然後針對不同的大小做出改變。 首先是讓右上方的“選單圖示”能在視窗為500的時候出現,需要替字串加入”active" 然後是左邊的文字需要在視窗為500的時候消失,需要替字串加上“collapse”
-if...else的運用對我來說比較容易理解,在操作上沒有太大的問題。 -但還需要牢記一些規定樣式: -ex 替字串增加文字時是classList 不是classnameList
這是的function運用加入了監聽模式addEventListener("click") 要實現當我們滑鼠點閱了“選單模式”後,能將我們隱藏的列表再次顯示出來。 並另外替“活動”增加另外兩頁的選項。
-這是在運用function時,比起上次的數字練習有點轉換不過來, -還不是很能搞懂function的運用時機,和程式碼應該打在哪邊的窘境。 -另外思考模式方面還無法快速的轉換為程式碼,這部分可能需要未來多加練習。
運用addEventListener( )
最後一個步驟是監聽整個網頁視窗大小,運用監聽模式去監聽size的變化。
以下完成整個練習項目的程式碼:
add和toggle的問題
\這邊是運用add讓HTML加入字串“active”讓目標出現。
navsub.addEventListener("click",function(){ drop.classList.toggle("active")
\為何這邊是使用toggle的方式讓目標“active”出現呢?