爆雷部分一直反白 我自己也覺得超煩... 天氣好熱更覺得煩...
其實跑論壇與其他網站,早就已知有這類語法~總之終於來試試囉...@@a

2025.6.29更新:大概因為官方更改了,把JavaScript 字串中的中文字,在儲存或渲染時,被二次編碼~
而變成「HTML 實體編碼/HTML Entity Encoding」(中文以[&#數字]顯示)
是可以修,但語法會變超複雜冗長(參見法5以後)。所以按鈕說明 直接改成英文了XDD 

※ 我這偷懶法,咕狗ai間接認可喔XD:『最常見的策略是讓 JavaScript 程式碼本身不要直接包含中文字符

 

主要參考/學習網站:
站A 2005.6.7 如何做到 onClick Link 隱藏或顯示 DIV 區塊?@ 藍色小舖 BlueShop 
站B 2019.5.17 div按鈕控制另一個div內容的顯示或隱藏 @ iT 邦幫忙 : 一起幫忙解決難題,拯救 IT 人的一天

 

以下大略整理的4種語法(本人原則:能用則行,不再多學XD)在手機版3種瀏覽器測試是 ok 有效果的.
只是 pixnet 手機版網頁的廣告 是覆天蓋地的多... 閱讀情緒會非常之受影響... 仍強烈建議 用電腦版閱讀
(反正我打的網頁 對手機版也不友善XD" 本人文字量極多,且喜歡排版,但手機版喜歡取消排版!所以會跑框~)
當然電腦版也測試過 OK,也亦使用3種瀏覽器:FF、Chrome、Edge。

★ 勿直接在 pixnet 後臺編輯文章內,直接複製貼上點擊按鈕... 語法將失效,且隱藏的內文會全部消失!!!

        

  

    

法1:只能點擊顯示,無法點擊隱藏.參考站A1樓(作者 Bryan).  

  如上,因為使用超連結 a,所以文字顯示會是藍字底線(有點醜?)
  pixnet 文章編輯頁面 可以直接點擊顯示,打文上會便利許多.可是不能點回隱藏... 會感覺有點技術不好XD;
  用 onclick 點擊觸發 JavaScript -> 用 document.getElementById 取得 ID 為 aaa 的元素 並開啟顯示.

<a onclick="document.getElementById('aaa').style.display=''" href="javascript:;">【點擊顯示 捏他文字】</a>
<div id="aaa" style="display: none;">   原本被隱藏的文字<br />   原本被隱藏的文字第2行</div>

  
實測/示範:  

  【點擊顯示 捏他文字】

   原本被隱藏的文字
   原本被隱藏的文字第2行

   

  

  

法2:可點擊顯示&點擊隱藏.參考站A3樓(同作者 Bryan). 

  與法4差異:此法2可以「顯示在行內」,而不會自成一段落 = 上下左右都會留白.
  javascript 的 html 標籤 <script></script> ,貼進 pixnet 發文的 html 內之後,
  會自動被 pixnet 改成 <script type="text/javascript">// <![CDATA[       .....         // ]]></script>  

  隨意解讀XD(我對 JS 完全沒有研究喔XD|||):點擊啟動 show22() 函數 ->
    當 isShow 值為 true 時,ID hide22 顯示,且改寫 ID show22 內文為【點擊隱藏】 
    當 isShow 值為 false 時,ID hide22 不顯示,且改寫 ID show22 內文為 【點擊顯示 捏他文字】
  函數名最好與 ID 同名,免得「同篇文章中」很多此語法時~會忘記改到函數名稱orz(因為是用取代批次)

<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<a id="show22" onclick="show22()" href="javascript:;">【點擊顯示 捏他文字】</a>
<div id="hide22" style="display: none;">原本被隱藏的文字<br />原本被隱藏的文字第2行</div>

<script>
var isShow = false;
function show22() {
    if(!isShow) {
        isShow = true;
       document.getElementById('hide22').style.display='';
       document.getElementById('show22').innerText = "【點擊隱藏】";
   }
   else {
       isShow = false;
       document.getElementById('hide22').style.display='none';
       document.getElementById('show22').innerText = "【點擊顯示 捏他文字】";
   }
}
</script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->

 
2025.6.29修正中文亂碼:
   

<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<a id="show22" onclick="show22()" href="javascript:;">【點擊顯示 捏他文字】</a>
<div id="hide22" style="display: none;">原本被隱藏的文字<br />原本被隱藏的文字第2行</div>

<script>
var isShow = false;
function show22() {
    if(!isShow) {
        isShow = true;
       document.getElementById('hide22').style.display='';
       document.getElementById('show22').innerText = "click to HIDE";
   }
   else {
       isShow = false;
       document.getElementById('hide22').style.display='none';
       document.getElementById('show22').innerText = "click to SHOW";
   }
}
</script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->

 
實測/示範: 

【點擊顯示 捏他文字】

原本被隱藏的文字
原本被隱藏的文字第2行

 

 

 

法3:可點擊顯示&點擊隱藏.參考站B回答2(作者 暐翰).  

  這是用內文段落 div 的範例 ... 所以會以普通內文方式呈現,而非超連結 a 呈現.
  小常識:函數名稱、ID 不要重複,不然會開啟錯區塊XD 當然命名也不要太常見,免得與網站本身語法重複
  這幾個語法,關於瀏覽器文件 JavaScript Document (wibibi),關於 document.getElementById() 

  隨意解讀:點擊啟動 show1() 函數 ->
       當 id hide1 沒顯示時:將 hide1 改為區塊顯示 ,並改寫 show1 內文為【點擊隱藏】  
       當 id hide1 有顯示時:將 hide1 改為不顯示 ,並改寫 show1 內文為【點擊顯示 捏他文字】 

<div id="show1" onclick="show1()">  【點擊顯示 捏他文字】</div>
<div id="hide1" style="display: none;">  原本被隱藏的文字<br />  原本被隱藏的文字第2行</div>

<script type="text/javascript">// <![CDATA[
function show1() {
    var show1 = document.getElementById('show1');
    var hide1 = document.getElementById('hide1');
    if (hide1.style.display === 'none') {
          hide1.style.display = 'block';
          show1.innerText = "click to HIDE";
    }
    else {
          hide1.style.display = 'none';
          show1.innerText = "click to SHOW";
    }
}
// ]]></script>

  
實測/示範:  

  【點擊顯示 捏他文字】
  原本被隱藏的文字
  原本被隱藏的文字第2行

 

 

法4:上述的花俏版  與法2差異:此法4會「自成一段落」,而不能「顯示在行內」.

  純黑文字很難讓訪客知道是按鈕,所以「可點擊 觸發事件的文字」,應該要「長得像按鈕」
  問題又回到~我們不是真的架站,而是在文章內文!所以不是用 真的按鈕語法(button 或 input 等)

  比如說這樣 這用 pixnet 寫文功能無法辦到,要去 html 打上下左右邊框... 回到 css 的小常識。

  由於是應用在 PIXNET 內文,而非真的去架站.
  也就是說 不方便把 CSS 統一設定/整理在原始碼最上方(架站會乾淨簡潔許多,要用時以 ID 或 class 叫出)
  樣式不能打在行內 <span style=""></span>,這樣只會在第1次顯示,當點擊過後,就只顯示純文字.  

<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<div id="show2" onclick="show2()"  style="background-color: #6182a3; border: 5px solid #99CCFF; border-radius: 5px; color: #ffffff; width:200px; margin-left:20px; text-align:center;">★ 點擊顯示 爆雷文字 ★</div>
<div id="hide2" style="display: none;">  原本被隱藏的文字<br />  原本被隱藏的文字第2行</div>

<script type="text/javascript">// <![CDATA[
function show2() {
    var show2 = document.getElementById('show2');
    var hide2 = document.getElementById('hide2');
    if (hide2.style.display === 'none') {
          hide2.style.display = 'block';
          show2.innerText = "click to HIDE";
    }
    else {
          hide2.style.display = 'none';
          show2.innerText = "click to SHOW";
    }
}
// ]]></script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->

  
實測/示範:

★ 點擊顯示 爆雷文字 ★
  原本被隱藏的文字
  原本被隱藏的文字第2行

 

  

其他:html 的「隱藏分隔線」  

  由於使用以上 html/css 去打文,又是在沒有自動分層/分色的最原始頁面!一定有快要瞎掉的感覺...
  所謂「隱藏分隔線」~也就是不會顯示在網頁中只會出現在原始碼的... 專業點(XD)稱為「註解」啦.
  打 CSS 的人一定知道的 /* 裡面是註解 */,在 HTML 則是 <!-- 裡面是註解 -->,JS 單行註解是 //只能單行 

  這是用來避免在一片黑字的 HTML 打文時,不小心截斷掉 JS,或~就是方便快速找位置啦XD"
  當然世界上也有些方便的小工具:HTML 線上整理器,如 HTML Formatter,自動上色&縮排 分階層.

 

 

實際應用範例:如本人此篇 2020.7  [Netfliex感想] 內政保鑣(Bodyguard)S1, 窒風(Deadwind,芬蘭影集)S1 , 越獄風雲(Prison Break)S1 全22

該篇文總共使用了「法4」4次「法2」2次
也就是我總共生出 12 種 ID 名稱6種函數名稱 ... 函數名稱若重複,也會開錯 = 執行到上個語法的函數XD"

 -*-*-♤-*-*--*-*-♤-*-*-

 

P.S. 不小心注意到,pixnet 的側欄廣告 害我網誌跑框了 囧||| 
好像我美感有問題似的~側欄最右側 留白間距消失orz 這麼肯定是廣告造成... 是經過 n 小時的檢測orz 
從文章所有欄位:檢查各篇打文 有無出錯或空白(大於 695 px),其他非打文的欄位寬度(可能官方動了語法)

以 chrome 開啟沒有跑框,但 chrome 有裝 AdBlock XD <- 其實主要用來擋 Xuite中國站過多 低水準廣告
chrome 沒登入. 繼續檢查:是否為登入差異(如 有登入會多出 前台各篇文 下方的編輯列(按鈕))
側欄所有區塊寬度(用檢測元素~寬度是沒錯都 235 px... 但又都位移了囧)、廣告區塊寬度 好像也沒問題???

當然,我現在修好了~故知道不是誣陷他們XD" 總之反覆用不同方法...最後以奇妙方式解決...:
 (1) 要關掉 PIXNET 廣告,必須先開啟 PIXNET 廣告... 官方邏輯問題 還是故意預設?
 (2) 參考此站教學:後臺點選開啟 MIB 分潤,裡面所有廣告欄位「都點選關閉」
 (3) 側欄影音廣告依然存活.但!跑框問題竟然就此解決 = =||| 可惡啊還我這幾小時的生命....orz

     ♧           *           ♧   

  

 

法5:AI生成版本  OPEN AI : ChatGPT : gpt-4o模型

經過5年~來到免費大AI時代,現在根本不用自己查自己學,念咒問AI就好了😂
關於錯誤的二次轉譯,主要解決方法:改用 .innerHTML 來插入文字(含 HTML 實體碼)
因為chatGPT 經營策略是 簡潔易懂,以擴大使用群體。所以幾乎沒解釋細節理由(且高階模型有提問限次)

會發現原始碼,根本直接用 html實體編碼在寫😂 如開頭紅字那串 是[★ 點擊顯示 爆雷文字 ★]orz
Google Gemini 解釋與表示 那行沒必要XD 因為出問題的是JS內的字串,而一般html瀏覽器會正確解析顯示

<a id="show55" onclick="show55()" href="javascript:;">&#9733;&#12288;&#40670;&#25802;&#39023;&#31034; &#29190;&#38647;&#25991;&#23383;&#12288;&#9733;</a>
<div id="hide55" style="display: none;">這裡是被隱藏的文字</div>

<script>
var isShow = false;
function show55() {
    var hideElem = document.getElementById('hide55');
    var showElem = document.getElementById('show55');

    if (!isShow) {
        isShow = true;
        hideElem.style.display = '';
        showElem.innerHTML = "&#9733;&#12288;&#40670;&#25802;&#38577;&#34255;&#12288;&#9733;"; // 點擊隱藏
    } else {
        isShow = false;
        hideElem.style.display = 'none';
        showElem.innerHTML = "&#9733;&#12288;&#40670;&#25802;&#39023;&#31034; &#29190;&#38647;&#25991;&#23383;&#12288;&#9733;"; // 點擊顯示 爆雷文字
    }
}
</script>   

  
實測/示範:

★ 點擊顯示 爆雷文字 ★

這裡是被隱藏的文字

  

 

法6:AI生成版本  Google AI Gemini :2.5 Flash模型

關於錯誤的二次轉譯,他提供2種解決方式,法一的原理是:
繞過 JavaScript 內的轉義: JavaScript 字串中不再包含中文,而是從一個不可見的地方(DOM元素)讀取。
實際使用<span>這個內連元素,它不會獨佔一行,此標籤本身沒有任何語意,是通用容器,通常用在顏色 字體
可通過JavaScript 操控,改變內容或樣式。 ※那個通用的函式名稱,被GPT點出 同一頁面複數按鈕 會出問題

gemini表示:href="javascript:void(0);": 這是比 javascript:; 更好的做法,可以避免瀏覽器在點擊時
嘗試導航到一個空的錨點。 將 innerText 改為 innerHTML,在某些情況下 能更好地處理字符編碼。

<a id="show66" onclick="toggleSpoiler()" href="javascript:void(0);">
    【點擊顯示 爆雷文字】
</a>
<div id="hide66" style="display: none;">原本被隱藏的文字<br />原本被隱藏的文字第2行</div>

<span id="text_show" style="display: none;">【點擊顯示 爆雷文字】</span>
<span id="text_hide" style="display: none;">【點擊隱藏】</span>

<script>
var isSpoilerHidden = true;

function toggleSpoiler() {
    var spoilerContent = document.getElementById('hide66');
    var spoilerButton = document.getElementById('show66');
    var textShow = document.getElementById('text_show').innerText; // 從隱藏元素獲取文字
    var textHide = document.getElementById('text_hide').innerText; // 從隱藏元素獲取文字

    if (isSpoilerHidden) {
        spoilerContent.style.display = '';
        spoilerButton.innerHTML = textHide; // 使用獲取到的中文文字
        isSpoilerHidden = false;
    } else {
        spoilerContent.style.display = 'none';
        spoilerButton.innerHTML = textShow; // 使用獲取到的中文文字
        isSpoilerHidden = true;
    }
}

// 可選:載入時先設定按鈕的初始文字,確保和上面 HTML 中的文字一致
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('show66').innerHTML = document.getElementById('text_show').innerText;
});
</script>

   
實測/示範:  

【點擊顯示 爆雷文字】

原本被隱藏的文字
原本被隱藏的文字第2行

【點擊顯示 爆雷文字】 【點擊隱藏】

  

 

法7:上述的另種解決法  Google AI Gemini :2.5 Flash模型

另種gemini說很不推薦但可行的~解決二次轉譯問題:使用 JavaScript 動態解碼。  

以下貼上:此方案優點: 如果您無法控制 HTML 內容或必須在 JavaScript 中指定這些編碼後的字串,這提供了
一種程式化的解碼方式。 缺點:1️⃣較為複雜: 需要一個額外的解碼函數。 2️⃣效率略低: 每次解碼都需要
創建一個 DOM 元素。 3️⃣難以閱讀: JavaScript 程式碼中會充斥著大量的 &#數字;,難以維護。
4️⃣安全性考量: 如果未來有其他來自外部(如用戶)的不可信內容 需要解碼,這種方式需謹慎使用 以防 XSS攻擊。
但在這個範例中,文字是您自己定義的,所以風險較低。

<a id="show67" onclick="toggleSpoiler2()" href="javascript:void(0);">【點擊顯示 爆雷文字】</a>
<div id="hide67" style="display: none;">原本被隱藏的文字<br />原本被隱藏的文字第2行</div>

<script>
var isSpoilerHidden = true;

// 輔助函數:將 HTML 實體編碼的字串解碼為普通文字
function decodeHtmlEntities(text) {
    var textArea = document.createElement('textarea'); // 使用 textarea 較安全
    textArea.innerHTML = text;
    return textArea.value;
}

// 假設 Pixnet 真的會把 JavaScript 裡的中文也轉成實體,那你就必須這樣寫
var displayShowText = decodeHtmlEntities("&#9733;&#12288;&#40670;&#25802;&#39023;&#31034; &#29190;&#38647;&#25991;&#23383;&#12288;&#9733;"); // 【點擊顯示 爆雷文字】
var displayHideText = decodeHtmlEntities("&#9733;&#12288;&#40670;&#25802;&#38577;&#34255;&#12288;&#9733;"); // 【點擊隱藏】


function toggleSpoiler2() {
    var spoilerContent = document.getElementById('hide67');
    var spoilerButton = document.getElementById('show67');

    if (isSpoilerHidden) {
        spoilerContent.style.display = '';
        spoilerButton.innerHTML = displayHideText; // 使用解碼後的文字
        isSpoilerHidden = false;
    } else {
        spoilerContent.style.display = 'none';
        spoilerButton.innerHTML = displayShowText; // 使用解碼後的文字
        isSpoilerHidden = true;
    }
}
</script>   

     
實測/示範:

【點擊顯示 爆雷文字】

原本被隱藏的文字
原本被隱藏的文字第2行

  

 

法8:單一通用函數 管理任意數量爆雷按鈕  Google AI Gemini :2.5 Flash模型

這要從 Gemini 自作聰明的show67 這類方便大量複製,以便「相同頁面 包含多個隱藏按鈕」不會呼應錯函數
改成通用名稱。他也承認了:若使用 toggleSpoiler 這樣的通用名稱,那麼每組按鈕 確實需要一個獨特的函數名
(例如 toggleSpoiler2、toggleSpoiler3),這會讓程式碼重複 且難以管理。

然後!他就教學了~更為龐大又複雜,的全新方法🤣😂 不再用onclick 屬性!!! 建立JavaScript 事件監聽器!!!
他說:這個方法的核心是利用 JavaScript 的事件對象和 DOM 遍歷,來找到被點擊的按鈕 及其對應的隱藏內容。

<a class="spoiler-toggle" href="javascript:void(0);">
    【點擊顯示 爆雷文字 1】
</a>
<div class="spoiler-content" style="display: none;">
    這是第一組被隱藏的文字<br />
    第一組第二行
</div>

<a class="spoiler-toggle" href="javascript:void(0);">
    【點擊顯示 爆雷文字 2】
</a>
<div class="spoiler-content" style="display: none;">
    這是第二組被隱藏的文字<br />
    第二組第二行
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 獲取所有具有 'spoiler-toggle' 類的按鈕
    var spoilerButtons = document.querySelectorAll('.spoiler-toggle');

    // 為每個按鈕添加點擊事件監聽器
    spoilerButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // 找到緊跟在按鈕後面的隱藏內容 div
            var content = this.nextElementSibling;

            // 判斷內容是否可見
            if (content.style.display === 'none') {
                content.style.display = ''; // 顯示內容
                this.innerHTML = "【點擊隱藏】"; // 修改按鈕文字
            } else {
                content.style.display = 'none'; // 隱藏內容
                this.innerHTML = "【點擊顯示 爆雷文字】"; // 恢復按鈕文字
            }
        });
    });
});
</script>
   

 
以上的原理,Gemini 說明文:

👉主要變更與說明:
    1️⃣移除 ID 和 onclick 屬性
        id="showXX" 和 onclick="showXX()" 不再需要。這樣您就不必 為每個按鈕編號了。
        原因: 我們將使用 CSS Class (類別) JavaScript 事件監聽器來處理。

    2️⃣引入 CSS Class:
        按鈕使用 class="spoiler-toggle"
        隱藏內容使用 class="spoiler-content"
        優點: 類別允許您將相同的樣式或行為 應用於多個元素,而無需單獨命名每個元素。

    3️⃣JavaScript 邏輯優化:
        document.addEventListener('DOMContentLoaded', function() { ... });:
   這確保了 JavaScript 程式碼在整個 HTML 文檔加載完成後才執行,避免找不到元素的問題。

        document.querySelectorAll('.spoiler-toggle'): 這個方法會選擇
   頁面上所有 class 為 spoiler-toggle 的元素,並返回一個節點列表 (NodeList)。

        forEach(function(button) { ... }): 我們遍歷這個列表,
   為每個按鈕添加一個事件監聽器 (event listener)。

        this.nextElementSibling: 這是最關鍵的部分。在事件監聽器內部,this 指的是當前被點擊的按鈕
   nextElementSibling 屬性可以讓你找到 緊跟在該按鈕後面的下一個兄弟元素。
   因為您把隱藏內容 div 放在按鈕的後面,這樣就可以精確地找到對應的內容。

   移除 isShow 變數: 每個按鈕不再需要一個獨立的 isShow 狀態變數。
   我們直接透過判斷 content.style.display 是否為 'none' 來決定是顯示還是隱藏。

 

以上改色好久... 但結果無效的😂 因為儲存後,pixnet常會自己更動(自動勘誤與修改)原始碼😓😞 變成:
<p><a class="spoiler-toggle" href="javascript:void(0);"> 【點擊顯示 爆雷文字 1】 </a></p>
<div class="spoiler-content" style="display: none;">這是第一組被隱藏的文字<br /> 第二行</div>

<p><a class="spoiler-toggle" href="javascript:void(0);"> 【點擊顯示 爆雷文字 2】 </a></p>
<div class="spoiler-content" style="display: none;">這是第二組被隱藏的文字<br /> 第二行</div>
<script type="text/javascript">// <![CDATA[    document.addEventListener

 
gemini:<p> 標籤的問題:Pixnet 編輯器在您儲存時,會自動在您的 <a> 標籤外部加上 <p> 標籤。這使得
<a class="spoiler-toggle"> 的下一個兄弟元素 (nextElementSibling) 不再是 <div class="spoiler-content">
而是這個自動生成的 <p> 標籤本身。因此,JavaScript 找不到正確的隱藏內容 div。 

  

👉 以下再度修正:調整 JavaScript 尋找元素的方式,使用父容器包裹,讓 JavaScript 能更穩定地找到它們

<div class="spoiler-group">
    <a class="spoiler-toggle" href="javascript:void(0);">
        【點擊顯示 爆雷文字 1】
    </a>
    <div class="spoiler-content" style="display: none;">
        這是第一組被隱藏的文字<br />
        第一組第二行
    </div>
</div>

<div class="spoiler-group">
    <a class="spoiler-toggle" href="javascript:void(0);">
        【點擊顯示 爆雷文字 2】
    </a>
    <div class="spoiler-content" style="display: none;">
        這是第二組被隱藏的文字<br />
        第二組第二行
    </div>
</div>

<script type="text/javascript">
// <![CDATA[
document.addEventListener('DOMContentLoaded', function() {
    var spoilerButtons = document.querySelectorAll('.spoiler-toggle');

    spoilerButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // 找到按鈕的父元素 (即 .spoiler-group)
            var parentGroup = this.closest('.spoiler-group'); 
            // 在這個父元素內部查找 .spoiler-content
            var content = parentGroup.querySelector('.spoiler-content');

            if (content.style.display === 'none') {
                content.style.display = ''; // 顯示內容
                this.innerHTML = "【點擊隱藏】"; // 修改按鈕文字
            } else {
                content.style.display = 'none'; // 隱藏內容
                this.innerHTML = "【點擊顯示 爆雷文字】"; // 恢復按鈕文字
            }
        });
    });
});
// ]]></script>   

     
實測/示範:    

【點擊顯示 爆雷文字 1】
這是第一組被隱藏的文字
第一組第二行

中間一些無須隱藏的 劇情說明或圖片 

【點擊顯示 爆雷文字 2】
這是第二組被隱藏的文字
第二組第二行

中間一些無須隱藏的 劇情說明或圖片2 

 

 

👉Gemini 說的 變更說明:
    1️⃣新增 spoiler-group 父容器
        每組按鈕 (.spoiler-toggle) 和其對應的內容 (.spoiler-content) 現在都被包裹在一個新的 div 中
   這個 div 有一個類別 class="spoiler-group"。 目的: 這樣可以為每組元素 創建一個明確的「範圍」。

    2️⃣JavaScript 查找邏輯的改變
        var parentGroup = this.closest('.spoiler-group');:
            this 仍然指向被點擊的按鈕
            closest('.spoiler-group') 是一個非常實用的方法。它會從當前元素(按鈕)開始,向上查找最近的
    具有指定類別(spoiler-group)的祖先元素。 這就找到了 包裹按鈕和內容的那個共同父 div。

        var content = parentGroup.querySelector('.spoiler-content');:
            一旦找到共同的父容器 parentGroup,我們可以這個父容器的內部查找 class 為 spoiler-content
    的元素。 這樣就能準確地定位到 該組對應的隱藏內容,而不受中間 <p> 標籤的干擾。

👉如何使用:
    1️⃣請將這段修改後的 HTML 和 JavaScript 貼到您的 Pixnet 網誌編輯器的原始碼模式 (HTML 模式) 中。
    2️⃣複製多組爆雷按鈕時,記得同時複製整個 <div class="spoiler-group">...</div> 區塊。

⚠️個人筆記:因為是共用JS,所以初次點擊按鈕,「接下來每次」點擊 就都沒有編號!每個按鈕變成相同🤔

 

法9:法5修正版  法5(AI修正版)+法4(法3花俏版)

用在 2020~2025 年 已發表的舊文章,爆雷按鈕的 JS語法 以求最簡單的修改(因為太多篇要改了|||orz

<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<div id="show99" onclick="show99()"  style="background-color: #6182a3; border: 5px solid #99CCFF; border-radius: 5px; color: #ffffff; width:200px; margin-left:20px; text-align:center;">★ 點擊顯示 爆雷文字 ★</div>
<div id="hide99" style="display: none;">  原本被隱藏的文字<br />  原本被隱藏的文字第2行</div>

<script type="text/javascript">// <![CDATA[
function show99() {
    var show99 = document.getElementById('show99');
    var hide99 = document.getElementById('hide99');
    if (hide99.style.display === 'none') {
          hide99.style.display = 'block';
          show99.innerHTML = "★ 點擊隱藏 ★";
    }
    else {
          hide99.style.display = 'none';
          show99.innerHTML = "★ 點擊顯示 爆雷文字 ★";
    }
}
// ]]></script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->

    
實測/示範:

★ 點擊顯示 爆雷文字 ★
  原本被隱藏的文字
  原本被隱藏的文字第2行

 

 

**♥  .  ♣  .  ♦  . ♠ . E N D . ♠ .  ♦  .  ♣  .  ♥

   

 
 
 
文章標籤
全站熱搜
創作者介紹
創作者 小無 的頭像
小無

小無的不臘閣 大圖多建議電腦版

小無 發表在 痞客邦 留言(2) 人氣(4,785)