导航栏手风琴链接不起作用

Question

我有一个导航栏，该导航栏包含我网站的另一页，导航栏中列出的页面有一个下拉列表，该下拉列表将链接到特定页面上的手风琴。我很难实现它，如果单击下拉列表项之一，那么您将被带到该页面，并且链接到该项的特定手风琴将被打开。

出于测试目的，我现在仅链接了导航栏列表项“ Monitoring”（手风琴）。当我单击“监视”时，将带我到正确的页面，但是手风琴仍处于关闭状态。

这是我的导航栏：

<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
    <div class="navbar-header" align="center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" style="color:white;" align="center"></a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav" style="color:white;" align="center">
            <li>
            <a asp-page="/Index" style="color:white;">Home</a>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
                        Centrify
                        <span class="caret"></span>

                        <ul class="dropdown-menu">
                            <li><a href="/Centrify">Centrify Home</a></li>

                            <li><a href="/Centrify?panel=1#Accordion1">Monitoring</a></li>
                            <li><a href="#">Patching</a></li>
                            <li><a href="#">Onboarding</a></li>
                            <li><a href="#">Disaster Recovery</a></li>
                            <li><a href="#">Reporting</a></li>
                        </ul>
                </li>
    </div>
</nav>

我要打开的手风琴：

<div id="Accordion1" role="tablist" aria-multiselectable="true">
    <div class="card">
        <div class="card-header" role="tab" id="2">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Vault Status
                </a>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
            <div class="card-block">
                <div class="form-group">
                    <label for="exampleFormControlSelect2">Select Environment</label>
                    <select multiple class="form-control" id="exampleFormControlSelect2">
                        <option>RTP</option>
                        <option>OMA</option>
                        <option>BGI</option>
                        <option>BG2</option>
                        <option>CLD</option>
                        <option>WRKSTN</option>
                        <option>QA</option>
                    </select><br />
                    <button>Submit</button>
                </div>
            </div>
        </div>
    </div>

JavaScript：

$(function() {
    $("#Accordion1").accordion();
});

function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts[i].indexOf('=');
            if (parts[i].substring(0, pos) == name) {
                return parts[i].substring(pos + 1);

            }

        }

    }
    return 0;
}

$(function() {
    var defaultPanel = parseInt(getParam('panel'));
    $("#Accordion1").accordion({
        active: defaultPanel
    });
});

Answer 1

我不知道是不是引起问题的原因，但是您的第一个HTML代码中缺少<ul>和第一个<li>的结尾

Answer 2

如果没有标题，您希望手风琴如何工作？ According to jQuery UI documentation，您的HTML应该看起来像

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

但不是。您需要配对标头内容才能使其正常工作。