搜尋
Close this search box.

「單頁內」有大量資料或段需要做切換隱藏時的功能

索引
全文

前言

透過按鈕或某元素的點擊,來對不同的段或元素做隱藏與展開(可指定多數量)。

雖Elementor中就有內建”收合容器”,只是收合容器中無法再做切版或置入多個段,或是只能把想置入的內容製成版型並使用簡碼方式置入收合容器中,所以有大量資料或段需要做切換隱藏時就非常適用。

運用範圍

當頁面過長時就非常適用,也可以運用在一般的區塊編輯器中。

亦可用在手機版選單中。

 

預覽效果

以下是一次對「多個段」做套用,點擊下面按鈕可見效果。

本次員工旅遊分三個梯次出發,詳情如下…

https://adptt.com/

第一梯:

出發時間:5/8~5/13

地點:日本

費用:每人6萬

https://0800happy.com/

第二梯:

出發時間:5/20~5/26

地點:日本

費用:每人6.5萬

https://smallway.tw/

第三梯:

出發時間:6/1~6/6

地點:日本

費用:每人7萬

實作方法

1、觸發按鈕或元素

可以拉一個按鈕標題圖示,在它的”進階/css類別”中填入「open_it」。

若拉的是一個按鈕,按鈕中的超連結預設是「#」,請刪掉這個「#」。

2、建立要切換隱藏的段

可以一次建立多個段,段裡面當然可以隨意切版或置入任意元素。

對每個段的”進階/css類別”中填入「show_content」。

3、貼上jQuery的code

可以在任意處或觸發按鈕的下方拉一個html工具,並貼上下列程式碼。

				
					
<script>
( function($) {
$(window).load(function() {
$('.open_it').click(function(){ 
  $('.show_content').slideToggle();
})

$('.open_it').css("cursor","pointer") 
$('.show_content').hide();
}); //end load
})(jQuery);
</script>

				
			

總結

上面的Code也可以直接埋入head中來全域執行(不一定要在Elementor中),這樣在用區塊編輯器寫文章時,只要對點擊元素與想切換隱藏的區域套上css類別即可生效。

全域性埋Code : 使用code snippets來埋入

有問題嗎?歡迎於下方發問

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

下一首

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 2 個使用者: 0 個成員0 個訪客2 個檢索機器人

線上同時最多使用者人數為 91 個使用者,發生於 2024-01-1423:41

2 個檢索機器人 正在線上

#1 – PetalBot 於 2024-02-2906:45
架站勤拿手 » » 「單頁內」有大量資料或段需要做切換隱藏時的功能 [網址] [參照連結網址]

#2 – PetalBot 於 2024-02-2906:44
架站勤拿手 » 【專題】作品集製作相關 [網址] [參照連結網址]