HTML-用jquery做點選隱藏切換效果程式碼教學

2019-12-12 01:41:38

在點選隱藏的程式碼中，hide（）可以將檔案隱藏，如果想要在隱藏和開啟狀態下互相切換需要用toggle()來做。

建立一個圖形圖形程式碼和關閉按鈕程式碼

現在基本結構是這樣的，文字和圖片是同級狀態

將main新增相對定位，對h1新增絕對定位，並且調整位置於右上角位置

如圖，現在的效果是這樣的

然後建立script標籤，引入jquery檔案，建立script屬性，點選事件click，當點選h1的時候，pic消失不見

這時候的效果就是，當點選關字的時候，左側的圖就會消失不見

如果想要做成切換的效果，點選一下即可開啟再點選一下就消失的那種，需要用toggle替換hide,如圖所示

這時候的效果就是，當點選右上角的關閉時，左側圖就會消失，當再點選一下就會出現圖。