jQuery 手風琴通過 url 激活？

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>的索引，它將不會按您預期的那樣工作。

為此，首先根據window.location.href或window.location.pathname找到最近的<h3> 。 這種匹配取決於您的錨標記的 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
});