如何從外部鏈接打開jQuery Collapsible.js

Question

我完全不知道如何從另一個頁面的鏈接打開面板。

我正在使用jQuery Collapsible.js。

我嘗試僅在鏈接后使用#body-section1 ，它將帶我到頁面上的面板標題，但不會打開它。

該頁面具有多個面板（16），並鏈接到整個站點的每個部分。 我的目標是讓用戶單擊一個鏈接，該鏈接會將他們帶到相關頁面，並為他們打開正確的面板。

我也嘗試過： link?open#body-section1 link?open/#body-section1 class="collapse-open link?aniMain/#body-section1

到目前為止，沒有任何工作。

我的HTML是：

<div class="page_collapsible" id="body-section1">Header Title<span></span></div>
<div class="container">
    <div class="aniMain">
         <p>Body text here</p>

    </div>
</div>

附帶的Javascript：

<script type="text/javascript">
$(document).ready(function() {

    //syntax highlighter
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();

    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };

    //collapsible management
    $('.collapsible').collapsible({
        defaultOpen: 'section1',
        cookieName: 'nav',
        speed: 'slow',
        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        loadOpen: function (elem) { //replace the standard open state with custom function
            elem.next().show();
        },
        loadClose: function (elem, opts) { //replace the close state with custom function
            elem.next().hide();
        }
    });
    $('.page_collapsible').collapsible({
        defaultOpen: 'body_section1',
        cookieName: 'body2',
        speed: 'slow',
        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        loadOpen: function (elem) { //replace the standard open state with custom function
            elem.next().show();
        },
        loadClose: function (elem, opts) { //replace the close state with custom function
            elem.next().hide();
        }

    });

    //assign open/close all to functions
    function openAll() {
        $('.page_collapsible').collapsible('openAll');
    }
    function closeAll() {
        $('.page_collapsible').collapsible('closeAll');
    }

    //listen for close/open all
    $('#closeAll').click(function(event) {
        event.preventDefault();
        closeAll();

    });
    $('#openAll').click(function(event) {
        event.preventDefault();
        openAll();
    });

});

在此先感謝您的協助。

Answer 1

在鏈接到面板后，您需要在頁面上執行的javascript。

您可以執行類似在頁面加載時檢查哈希（ window.location.hash ），然后打開相應的可折疊對象的操作。

$(document).ready(function() {
    //setup should happen first
    $('.page_collapsible').collapsible({
        defaultOpen: 'body_section1',
        cookieName: 'body2',
        speed: 'slow',
        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        loadOpen: function (elem) { //replace the standard open state with custom function
            elem.next().show();
        },
        loadClose: function (elem, opts) { //replace the close state with custom function
            elem.next().hide();
        }

    });
   //open the collapsible which was targetted in the url
   $(window.location.hash).collapsible('open'); //where the hash matches the id of whichever collapsible you want to open
});

因此，如果您要鏈接到並使用id="body-section1"打開可折疊的文件，則您的鏈接應類似於link#body-section1