显示 div 在 URL 中使用锚点

Question

我正在使用 jQuery-collapse plugin 到 hide/show post 的正文内容，并希望每个 post 也可以被 URL 访问。

<div id="<?php the_slug(); ?>" data-collapse>
   <div id="collapse">

        //  Toggle content

   </div>


   <div class="main-content">

        // Hidden content       

   </div>
</div>

我尝试的方法是调用 post slug 作为 post ID（所以我可以在 url 中使用 #the_slug），找到它，然后给折叠器的第一个 child class "open" （插件应该识别）。如下：

window.onload = function() {
var hash = window.location.hash;
if(hash != "") {
    var id = hash.substr(1);
    var d = document.getElementById(id);
    d.firstChild.className = "open";
} 
};

只要将 class 应用于第一个 child，它就可以工作，但插件不承认它（如果我将 class="open" 添加到标记中，它就会这样做） .

任何帮助理解为什么/其他选项非常感谢。

Answer 1

如果你使用jQuery，你可以这样做：

if(hash != "") {
    $(hash).addClass("open");
}

Answer 2

问题是库不监听类名变化。

来自插件API

$(d).children( ).eq(0).trigger("open");

使用此代码代替 className 分配。

显示 div 在 URL 中使用锚点

Showing div using anchor in URL

javascript

jquery

wordpress

toggle