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

我完全不知道如何从另一个页面的链接打开面板

我正在使用jQuery collapsable.js

我尝试过在链接后简单地使用

#body-section1

，该链接会将我带到页面上的面板标题，但不会打开它

此页面有多个面板（16）和指向整个站点每个部分的链接。我的目标是让用户点击一个链接，将他们带到相关页面，并为他们打开正确的面板

我也尝试过：

link？打开#车身部分1

link？打开/#车身部分1

class=“折叠打开链接？aniMain/#车身部分1

到目前为止还没有任何进展

我的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();
    });

});

$（文档）.ready（函数（）{
//语法荧光笔
hljs.tabReplace=''；
hljs.initHighlightingOnLoad（）；
$.fn.slideFadeToggle=函数（速度、缓和、回调）{
返回这个。设置动画（{opacity:'toggle'，height:'toggle'}，速度，缓和，回调）；
};
//可折叠管理
$（'.collable'）。可折叠({
defaultOpen:'section1'，
cookieName:'导航'，
速度：“慢”，
animateOpen:function（elem，opts）{//用自定义函数替换标准的slideUp
elem.next（）.slideFadeToggle（选择速度）；
},
animateClose:function（elem，opts）{//用自定义函数替换标准的slideDown
elem.next（）.slideFadeToggle（选择速度）；
},
loadOpen:function（elem）{//用自定义函数替换标准打开状态
元素next（）.show（）；
},
loadClose:function（elem，opts）{//用自定义函数替换关闭状态
元素next（）.hide（）；
}
});
$（'.page_可折叠'）。可折叠({
defaultOpen:'body_section1'，
cookieName:“body2”，
速度：“慢”，
animateOpen:function（elem，opts）{//用自定义函数替换标准的slideUp
elem.next（）.slideFadeToggle（选择速度）；
},
animateClose:function（elem，opts）{//用自定义函数替换标准的slideDown
elem.next（）.slideFadeToggle（选择速度）；
},
loadOpen:function（elem）{//用自定义函数替换标准打开状态
元素next（）.show（）；
},
loadClose:function（elem，opts）{//用自定义函数替换关闭状态
元素next（）.hide（）；
}
});
//将打开/关闭所有功能分配给
函数openAll（）{
$（'.page_可折叠'）。可折叠（'openAll'）；
}
函数closeAll（）{
$（'.page_可折叠'）。可折叠（'closeAll'）；
}
//收听关闭/打开全部
$（“#closeAll”）。单击（函数（事件）{
event.preventDefault（）；
closeAll（）；
});
$（'#openAll'）。单击（函数（事件）{
event.preventDefault（）；
openAll（）；
});
});

---

提前感谢您的帮助。

链接到页面后，您需要在带有面板的页面上执行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
谢谢dhreg。我将此添加到面板列表所在页面的顶部，并在结束时完成了代码（和；。但是，当我单击外部链接时，也会发生同样的情况。它将转到该页面并找到正确的哈希标记，但不会打开它。我的链接方式是：
link\page-section1
您能否澄清您使用的是哪个可折叠库？（链接到文档）。您可能需要将哈希检查/扩展代码移到可折叠文件的初始化下面。很抱歉，在此之前没有包含此代码；我正在使用的演示的此链接应该是指向库的正确链接。非常感谢。没问题，只是碰巧有一些库看起来很相似，但是不同的功能。让我知道，如果我修改后的答案对你有帮助+1它工作得很好。我要做的是改变开放到关闭。再次感谢你。