jquery網站中隱藏選單製作

2019-12-11 08:39:32

在網站製作中，隱藏顯示選單是經常所見的，今天我們來自己製作一個簡單的選單製作，點選開啟/關閉選單，我們知道隱藏選單命令是hide(),顯示為show(),那麼組合起來切換狀態是toggle(),括號內可以填寫時間。

開啟DW軟體，先製作自己的簡單靜態頁面，如圖

這裡建立最大的div內包含h1和ul，這樣在移動div時整體會移動，ul作為一個簡單的導航欄出現，對div可以建立個類名稱，然後對div相對定位，h1和ul作為子集相對定位，

檔案儲存，瀏覽器中預覽下效果，如圖

然後開始進行效果描述，點選h1標籤時，ul會隱藏，這是一個點選事件

$("h1").click(function(){

$("ul").hide()

})

儲存檔案後，回到瀏覽器中，當滑鼠點選h1時，ul會隱藏。隱藏之後，就無法再恢復

hide()和show()是相對的，如果可以在兩者之間進行切換，就需要toggle()

$("h1").click(function(){

$("ul").toggle()

})

進行toggle()切換設定後，當點選h1時，ul隱藏，當再次點選h1時，ul就會重新顯示，

這就是我們經常見到的效果。

在toggle() 中的括號中可以輸入時間設定，比如輸入300，就是0.3秒時間內發生變化，是一個逐漸的過程。