避免 Bootstrap 開闔式內容 (accordion) 收闔

問題簡述

雖然開闔式內容 (accordion) 最原初的目的,
是要讓使用者可以集中注意力於面板上的內容,
因此當開啟其他項目時,原本顯示的項目應該要收闔。

邏輯上應該是這樣。

但最近遇到有客戶想要「點開其他項目的時候,原本的項目不要收闔」。

解決方案

由於使用的佈景主題引入了 Bootstrap,因此上網搜尋了相關的解決方法。這個程式碼片段是複製 https://www.codeply.com/go/bp/90JfjI2Q7n 的做法。

<script>
(function ($) {
    $('a[data-toggle="collapse"]').on('click', function () { //在 Bootstrap 使用 data-toggle 來做選擇器
        var objectID = $(this).attr('href');
        if ($(objectID).hasClass('in')) {
            $(objectID).collapse('hide');
        } else {
            $(objectID).collapse('show');
        }
    });
})(jQuery);
</script>

概念上其實不難,但是一開始擔心會不會和原本 Bootstrap 的功能衝突。
實際測試之後好像沒有太大的問題,所以就拿來用了。

但說真的,整個網站只有一個頁面需要使用這段 JavaScript 指令碼,
如果全部都引用的話,蠻沒有效率的。
所以還是在 functions.php 裡面做條件篩選。(到底為什麼要用這樣)

<?php
if( preg_match( '/.*csr.*/', get_query_var( 'pagename' ) ) ) {
    wp_enqueue_script( 'accordion-fix', get_stylesheet_directory_uri() . '/js/accordion-fix.js', array( 'jquery' ), '', true );
    }

全部都是蠻幹塞上去的做法,其實蠻不喜歡的。
如果有更好的做法,也可以再跟我分享。

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124