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

如何从外部链接打开jQuery Collapsible.js

1 个答案: