通过URL启用的jQuery手风琴？

Question

标题脚本部分。

$(document).ready(function(){
    var show_link = '/hr/resitration'; // That is current url.
    var accordion = $("#accordion");
    active = ???? // How to found activ url???
    accordion.accordion({
        header: "h3",
        active: active,
        autoHeight: false
    });
});

在HTML部分中

<div id="accordion">
    <h3><a href="#">Dashboard</a></h3>
    <div>
        <ul>
            <li><a href="/dashboard/my" >My works</a></li>
            <li><a href="/dashboard/send" >Send works</a></li>
        </ul>
    </div>
    <h3><a href="#">HR</a></h3>
    <div>
        <ul>
            <li><a href="/hr/resitration?add=true" >Add Staff</a></li>
            <li><a href="/hr/resitration" >Staff list</a></li>
            <li>Config
                <ul>
                <li><a href="/hr/schools" >Schools</a></li>
                <li><a href="/hr/role" >Roles</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 1

我认为这会让您接近：

active = accordion.find("a[href="+show_link+"]").parents("h3");

Answer 2

var links =  accordion.find("a");
active = links.find("[href=/hr/resitration]").index();

Answer 3

使用jQuery UI 1.12，您需要提供<h3>的索引，该索引与<div>的手风琴菜单中包含的内容分开。如果提供<div>的索引，它将无法按预期工作。

[为此，首先根据<h3>或window.location.href找到最接近的window.location.pathname。这种匹配取决于锚标记的URL和您所在页面的URL。我们首先匹配锚标签，然后转到最接近的<div>并通过以下方式遍历一个同级回到<h3>：

$( "#accordion" ).find("a[href=\""+window.location.pathname+"\"]").closest("div").prev())

然后在手风琴菜单中选择所有H3：

$( "#accordion h3" )

我们可以通过以下方法将其组合成一个命令来获得所有<h3>组中最接近的<h3>的索引：

var active = $("#accordion h3").index($( "#accordion" ).find("a[href=\""+window.location.pathname+"\"]").closest("div").prev())

然后您可以在初始化手风琴时使用此活动索引，如下所示：

accordion.accordion({
    header: "h3",
    active: active,
    autoHeight: false
});