如何从外部链接打开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