[191117]-leepiny

[leepiny]

---

JavaScript & Bootstrap 的實作練習

• if...else的實用項目
  
  本次作業要讓網頁上方的navbar能監聽視窗的大小，然後針對不同的大小做出改變。
  首先是讓右上方的“選單圖示”能在視窗為500的時候出現，需要替字串加入”active"
  然後是左邊的文字需要在視窗為500的時候消失，需要替字串加上“collapse”
  

-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運用加入了監聽模式addEventListener("click")
  要實現當我們滑鼠點閱了“選單模式”後，能將我們隱藏的列表再次顯示出來。
  並另外替“活動”增加另外兩頁的選項。
  

-這是在運用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")
})

---

add和toggle的問題

• 問題一
  在用if...else去隱藏和顯示menu選單時程式碼用的是add，
  但在用function模式要去隱藏和顯示menu選單時程式碼用的是toggle。
  不知道這兩者的差別為何？
  只是單純因為程式碼的語法不同嗎？

if(document.body.clientWidth < 500){
        toggle.classList.add("active")

\\這邊是運用add讓HTML加入字串“active”讓目標出現。

navsub.addEventListener("click",function(){
    drop.classList.toggle("active")

\\為何這邊是使用toggle的方式讓目標“active”出現呢？